unordered list items not aligning to each other

Question

I have this code that should create a sticky navigation bar on the top of the site:

#navigation-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: rgb(225, 151, 77, 0.95);
    overflow: hidden;
    position: sticky;
    top: 0;
}

#navigation-bar li {
    float: left;
}

#navigation-bar li a {
    color: white;
    padding: 5px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-family: sans-serif;
}

#navigation-bar li a:hover {
    background-color: red;
    color: rgb(225, 151, 77);
}

header {
    position: sticky;
    top: 0;
}

#navigation-home-logo {
    height: 50px;
    padding: 0;
    margin: 0;
}


<header>
    <nav>
        <ul id="navigation-bar">
            <li><a href=""><img  id="navigation-home-logo" src=""></a></li>
            <li><a href="">INSTAGRAM</a></li>
            <li><a href="">TIKTOK</a></li>
            <li><a href="">TWITTER</a></li>
            <li><a href="">YOUTUBE</a></li>
        </ul>
    </nav>
</header>

I don't understand why the other links are not lining vertically with the image, I tried setting the image padding and margin to 0 but obv it didn't work and I have no idea of what the problem is

score 0 · Accepted Answer · answered May 21 '21 at 05:38

0

This happens because that's how display: block works, you can use Flex in order to do so. Like:

#navigation-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: rgb(225, 151, 77, 0.95);
    overflow: hidden;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
}

#navigation-bar li {
    float: left;
}

#navigation-bar li a {
    color: white;
    padding: 5px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-family: sans-serif;
}

#navigation-bar li a:hover {
    background-color: red;
    color: rgb(225, 151, 77);
}

header {
    position: sticky;
    top: 0;
}

#navigation-home-logo {
    height: 50px;
    padding: 0;
    margin: 0;
}

<header>
    <nav>
        <ul id="navigation-bar">
            <li><a href=""><img  id="navigation-home-logo" src="https://picsum.photos/200"></a></li>
            <li><a href="">INSTAGRAM</a></li>
            <li><a href="">TIKTOK</a></li>
            <li><a href="">TWITTER</a></li>
            <li><a href="">YOUTUBE</a></li>
        </ul>
    </nav>
</header>

answered May 21 '21 at 05:38

Gonzalo F S

412
3
8

Works great! Thx man – newbie May 21 '21 at 05:49
Actually there is one thing, before applying your change when i went over an item with the mouse the whole item would change its attributes to the ones in a:hover but now only the text area changes, the orange part outside of it remains the same – newbie May 21 '21 at 05:55
Okay, so, actually before my change it was the same, you think as "the whole item" and "text area" but actually, it is just the `` tag, the hover changes the a background, and what you see that is not changed is actually its parent `
` . So in order to do so, change the parent background when hover and give it the desired height also using flex: `#navigation-bar li { float: left; height: 50px; display: flex; align-items:center; } #navigation-bar li:hover { background-color: red; color: rgb(225, 151, 77); }` Wrong formatting, Ill edit the answer

Gonzalo F S

May 21 '21 at 06:16

1

Yeah i figured out it was changing only the a tag, thx for the answer btww – newbie May 21 '21 at 06:21

score 0 · Answer 2 · answered May 21 '21 at 05:46

0

You could try to use display:block in the nav element instead of the specific links, because display block is applied to all elements inside the element you're applying it to:

nav{
    display: block;
}

answered May 21 '21 at 05:46

shreyas

7
2

unordered list items not aligning to each other

2 Answers2