My navbar list elements are moving to next line, How can I position them to fit in single line?

Issue

I added li items but the last item is leaving the navbar and getting below it [newline],
I want them to style in such a manner that they all will appear in single Line inside navbar
I am a noob, a little explanation would be appreciated…
Thank you Here is my code
HTML CODE:

body {
    margin: 0;
    background-color: #e4f5ff;
    padding: 0;
}

nav {
    vertical-align: middle;
    background-color: #022534;
    padding: 0;
    margin: 0;
    height: 20px;

}

nav li {
    align-items: center;
    justify-content: space-between;
    display: inline-flex;
    padding: 10px 5%;
    background-color: none;
    font-size: 35px;
    margin: auto;
}

a {
    text-decoration: none;
    color: #e4f5ff;
}

#Logo {
    font-family: 'Poppins', sans-serif;
}
<header>
        <nav>
            <ul>
                <li><a href="" id="Logo">Myweb</a></li>
                <li><a href="">Categories</a></li>
                <li><a href="">Latest</a></li>
                <li><a href="">More</a></li>
                <li><a href="">About-Us</a></li>
                <li id="login"><a href="">Login</a></li>
            </ul>
        </nav>
    </header>

Solution

The font-size of 35 and padding of 5% is quite large. If the elements don’t fit in a line, it will have to overflow. What you can do is lower the font size and left/right padding of the li elements so they fit better in a line. However, keep in mind you will have to style for responsiveness when the screen gets smaller, such as turning the navbar into a hamburger menu.

body {
    margin: 0;
    background-color: #e4f5ff;
    padding: 0;
}

nav {
    vertical-align: middle;
    background-color: #022534;
    padding: 0;
    margin: 0;
    height: auto;

}

nav li {
    align-items: center;
    justify-content: space-between;
    display: inline-flex;
    padding: 10px 5px;
    background-color: none;
    font-size: 25px;
    margin: auto;
}

a {
    text-decoration: none;
    color: #e4f5ff;
}

#Logo {
    font-family: 'Poppins', sans-serif;
}
<header>
        <nav>
            <ul>
                <li><a href="" id="Logo">Myweb</a></li>
                <li><a href="">Categories</a></li>
                <li><a href="">Latest</a></li>
                <li><a href="">More</a></li>
                <li><a href="">About-Us</a></li>
                <li id="login"><a href="">Login</a></li>
            </ul>
        </nav>
    </header>

Answered By – Xenvi

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published