Issue
My site's header section contains a list which is supposed to wrap on smaller screens
But at certain screen sizes, a wrap occurs (= the height of the header section doubles) before the first list item is moved to the second line. Is there any way to avoid this behaviour and make sure the header's height only increases when there actually is a list item displayed on the second line?
header > nav > ul {
display: block;
text-align: left;
hyphens: none;
margin: 0;
}
header > nav > ul > li
{
list-style: none;
display: inline;
padding-right: 1.5rem;
}<body>
<header>
<nav>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>Solution
Use flexbox and flex-wrap:
.header {
display: flex;
flex-wrap: wrap;
padding: 0;
}
If you don't want to use flexbox, you can use media queries to adjust the CSS styling of the element based on the screen size:
@media (max-width: 600px) {
.header {
/* adjusted styles */
}
}
If you want to stop list items from wrapping individually, you can set white-space: nowrap; on the list item.
Answered By - Jacob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.