Landing Page of Nivea Cream

Hi guys…please have been struggling on making my ‘How to work’, ‘features’, and ‘pricing’ nav-links to be horizontal and very close to the logo, to actually be on a row…please .help…i want to solve that issue before continuing with the Css design…can anyone just please help ne out?because i’ve been struggling on that about two days ago

Also…my header is covering some text beneath…it…i want the text to show just below the fixed header.
Thanks guys

Hello @Clement-Othniel a couple of pointers;

You’re using flexbox a lot in places where the default flow of the elements would display the same, for example, on your nav you are telling the Nav (not the list inside) to show vertically, this is redundant as it is not styling anything. You can remove flexbox and it’s styles from this element in your CSS.

I see you’re trying to use flexbox to try and style nav > ul which again, is telling the UL to stack and not the actual child LI elements, so you could remove the CSS from this.

What you need to get the menu to display in a row, and not a column, you can either, use display: inline-block; vertical-align: middle and apply this to your LI element.
Or, use flexbox such as display: flex; flex-flow: row wrap; align-content: center;

For your header, because you’ve used position: fixed you’ve taken it out of the normal flow of the document, and “fixed” it to the screen. Remove this declaration and it won’t sit above your other elements.

1 Like

Thanks so much i appreciate.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.