Need help with nav bar positioning

HTML-CSS
1

Hey there,
I just started to work on a landing page project.
I’m stuck and can’t fix the positioning of my elements in the header.
I want the logo picture to be on the left and the nav bar to stay on the right.
I tried using flex but couldn’t succeed.
I am really confused about the flex positioning of elements.
To pass the tests I need the nav bar to be fixed on top.
Can anyone hint what should I do?

2

Hey! if you want to fix your header containing the logo and the nav bar, all you need to add is position and set it to fixed, that way even if you scroll, the header will be fixed at top.
For more reference about position : https://css-tricks.com/almanac/properties/p/position/

1 Like
3

There is a missing double quotation on your img tag attribute src.

With regards to your your questions try to review the fcc challenge about css flex it will take around 20 mins.

And for the navbar to be fixed you should use ( position: fixed )

1 Like
4

I understand about the fixed top position. I can not understand how to make one element (logo) be aligned to the left side of the header and the other element (nav bar) to align to the right side of the header. Should I use display: flex? Or absolute positioning for the two elements?

5

An easy way is to use display: flex, justify-content: space-between. That will put one thing to the left, the other to the right.Then adjust using margin of the individual items.

2 Likes
6

Follow this trick

You header should have two child elements; Logo and unordered list (ul)

The UL should contain all your links. The links should be wrapped inside an LI tag e.g

  • link

    • Now use these CSS styles;
      Header: height 70px
      UL: Float to right, margin right 30px.
      UL LI: inline block display, line-height of 70px, padding-left 20px
      LOGO: Margin-left of 30px, margin top of 15px.

7

You have an unclosed div there and that’s one of the reasons your nav doesn’t display the way you want.
The second thing it’s in your css. You used the class flex-container as an id. Replace # with .

.flex-container {
display: flex;
justify-content: space-between;
}

   <header id="header">
    <div class="flex-container">
        <div id="logo">
            <img id="logo-picture" src="https://iili.io/2XUCAl.png" alt="logo image" >
           </div>
        <nav id="nav-bar">
           <ul>
               <li><a href="#about-us" class= "nav-link">About us</a</li>
               <li><a href="#menu" class="nav-link">Menu</a></li>
               <li><a href="#book" class= "nav-link">Book a table</a></li>
           </ul>
        </nav>
    </div>
   </header>
1 Like
8

The header should have two child elements; Logo and unordered list (ul)

The UL should contain all your links. The links should be wrapped inside an LI tag.

Now use these CSS styles;

Header: height 70px
UL: Float to right, margin right 30px.
UL LI: inline block display, line-height of 70px, padding-left 20px
LOGO: Margin-left of 30px, margin top of 15px.

1 Like
9

I just deleted all the css code and started again.
Thank you so much for the help everyone!
Much appreciated!
I see I made some really stupid mistakes :confused:

10

We are learning from mistakes! I saw you’ve made some changes and it start to look good.

Happy coding! :slightly_smiling_face: