Help needed with product landing page nav

1

Hey guys.
I’m having trouble understanding what the displays do (in this case inline, block and inline-block).
Here is my code https://codepen.io/Olspe/pen/YobZYx . I got the navs to be placed side by side horizontally but only after setting nav li to display: inline (and looking at someone’s code). Before that I kept trying to set them side by side by putting display inline inside nav{} and nav ul{} but it wouldn’t work. Can anyone please tell me why?

Also how do I make the header nav and image stick to the top while I’m scrolling?

2

Hi @Olspe sorry about my English but if I have the honor to help hmm
first of all at the id #header
you can remove in CSS those properties:
flex-direction: row; && vh: 20vh; - because you don’t need them

2. at the nav in style ( CSS ) remove :  
background: black;
3. at the nav UL remove:
background: white;
4. at the nav LI remove :
background: grey;

Now in CSS add some little things :crazy_face:
try to add

ul a {
   text-decoration: none; /* Which remove down line in a text */
   color: black; /* Which change color of text. */
}

You asked for to work header navbar while you scrolling just add something
in #header ( CSS ) add :

overflow: hidden;
position: fixed;  /* Set the navbar to fixed position */
top: 0;  /* Position the navbar at the top of the page */
width: 100%; /* Full width of navvbar */
3

Thanks so much for the help!:smiling_face_with_three_hearts:

4

Nothing , I want to tell you a quote :slight_smile:

If it doesn’t challenge you, it won’t change you.

So keep going!

1 Like