Build a Product Landing Page prblm

Tell us what’s happening:

Hi ,i have a problem with my code i coded the navbar and if i add the logo image the navbar disappear
this is the codpen link : https://codepen.io/zaki_aggab/pen/jjbGER?editors=1100

before : https://cl.ly/994118703032

after: https://cl.ly/01d8c13a3f13

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36.

Link to the challenge:

You have two block-level elements inside the header (logo div and nav). They each take up 100% of the width so they can’t share the horizontal space. The nav is below the header you just can’t see it because of the white text color on the links. Personally, I would suggest not using floats for this layout, look into flexbox.

Anyway, you can float the .logo div to the left. Or you can set the .logo div to be inline-block and float the nav to the right. Both will cause issues at smaller screen sizes.

I’d suggest setting the header to display: flex and also give it align-items: center then use margin-left: auto on the nav.
https://codepen.io/anon/pen/XLpjMj

2 Likes

Thank you very much :heart_eyes::heart_eyes:

Was about to say literally the same thing as @lasjorg use flexbox on your <‘header’> element and adjust the margin between your logo and your ‘’ afterwards.

Also, dont know if this might help but here is a Guide(cheatsheet) to Flexbox.