Weird Nav Bar Positioning

Hi friends! So I know there are a million+ questions about centering the navbar/centering divs (I know because I’ve read through them all trying to solve this) but I’m still struggling to center my navbar. Even if I make the width 100% there’s still a gap to the left of the bar so I know that something is wrong with my positioning. I’m guessing it’s something to do with my nesting but I can’t figure out what.

Any help is greatly appreciated!

P.S. I know my nav links are not “listed”. This is a choice and I don’t think it should change anything re: formatting.

When you put position:fixed on the <nav> then it basically becomes absolute positioning, and using margin: auto won’t work any more for centering. So you’ll have to figure out a way to use left or right property to shift it over enough to center it.

One way I did it is to set the width on the menu in rems and then you can shift it left by 50% minus half the rem width.

1 Like

Wouldn’t that then change the responsiveness when resizing the browser?

At some point you are probably going to want to use a media query to change the layout of the menu for narrow screens (such as switch to a hamburger menu), so that will make it responsive.

Your current solution of using percentages does work, but as you narrow the browser the menu isn’t wide enough to hold all of the links in one row and rearranges them into multiple rows. That’s probably fine for this project but in the “real world” I doubt that is something that the designer would be happy with.

1 Like

There are a number of issues with your code:

  1. <body></body> tag should contain all of your presentation code (div, ul, p, nav, header, article, etc.) not the other way round.
  2. You have assigned left: 30% to the nav that will set the fixed positioned nav to start after 30% of the viewport width from left.
  3. Since nav is nested inside relative positioned website div with auto left-right margin, the starting point of nav becomes the same as the starting point of the website div, which is not extreme left. Since you are fixed positioning the nav, bring it outside of all the other divs and position it independently. Even better, for what you are trying to achieve for nav, use position:sticky instead
  4. The spelling of position attribute in #website is wrong.

If you fix these issues, you should be able to get the result you are aiming for.

1 Like

Thank you so much! 1,2,4 are fixed but even when I remove the left: 30% and get rid of all the CSS for #website … the nav is still not centered.

Also, when I change the position from fixed to sticky, the nav bar completely disappears…

I can see the difference in the Codepen. You can now do either of the following options:

  1. Bring the nav outside of the header and change to position: sticky, or
  2. add left: 30% and right: 30% on the nav, if you still want to keep it inside the header

Ya, you need the left property to help you center the menu. My suggestion:

  • set the width on the menu in rem
  • center the menu by setting left on the menu to 50% minus half the width of the menu

The nav needs to be inside the header to pass the product landing page test. I tried it though, but it still disappeared.

Step 2 didn’t center it either but I was able to use @bbsmooth 's suggestion with a little research into how to use calc() functions.

I don’t know why sticky positioning is not working for this but thank you both for your help! :smiling_face:

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