Here below I have a link to my codepen which shows you the format for my header on my website. I'm struggling to understand why when the browser width is shortened that the nav goes off the line. What I'm trying to aim for is the nav to shrink with the header when the width is shortened. Any help would be thankful.
https://codepen.io/bulletman123/pen/QmBKdN
<body>
<div class="headerBar">
<h2>Tottenham Hotspur</h2>
<nav>
<ul>
<li><a href="index.html">Tickets</a></li>
<li style="margin-right: 30px"><a href="learnHTML.html">Fixtures & Results</a></li>
<li><a href="learnCSS.html">News</a></li>
<li><a href="learnJS.html">About Us</a></li>
<li style="width: 55px; margin-left: 85px; "><a href="learnJS.html" style="border-left: 0px;">Login</a></li>
<li style="width: 70px; "><a href="learnJS.html" style="border-left: 2px solid rgb(155, 163, 168);">Register</a></li>
</ul>
</nav>
</div>
</body>
nav{
display: inline-block;
}
nav ul{
display: flex;
flex-direction: row;
}
nav ul li{
border: none;
padding: 5px;
width: 160px;
}
nav ul li a{
border-left: 2px solid rgb(155, 163, 168);
color: #102964;;
padding-right: 0px;
padding-left: 10px;
transition: 0.4s;
}
.headerBar{
height: 80px;
background-color:#d1d1d1;
border-radius: 12px;
box-shadow: 7px 6px 50px -5px rgba(0,0,0,0.75);
}
.headerBar h2{
padding: 20px;
margin: 0px;
font-size: 30px;
color: #102964;
display: inline-flex;
}
Aucun commentaire:
Enregistrer un commentaire