Nav Bar won't center properly

[Gunteric]

I have been working on a project for school, but I’m having a bit of issue with centering the navigation bar. If anyone can help that would be appreciated.

http://codepen.io/anon/pen/yJEaJd

This is the code I have written so far.

[Shikkediel]

One way would be to add this:

nav {
left: 0;
right: 0;
}

It will make margin: auto have effect…

[Gunteric]

Thank you for your solution. It works properly now. What was the reason for it being off centered like that? I was under the impression that margin: 0 auto; was the same as margin: 0 auto 0 auto; making it center itself automatically. Was there something in my code causing it to reject that part of the code?

Thanks,
And again thanks for the solution.

[Shikkediel]

No problem. Using margin: auto won’t work on fixed (or absolute) positioned elements unless this little trick is used. It’s not easy to explain though, it’s just how the spec is designed. Another option would be to use a transform to center it.

nav {
left: 50%;
transform: translateX(-50%);
}

[Gunteric]

Got it, cheers mate!

[Shikkediel]

Cheers, you wouldn’t need so set the margin to auto (or the extra left and right values) if you decide to use the transform approach…

For older browser support, also adding a rule for webkit would be best by the way.

-webkit-transform: translateX(-50%);

[Gunteric]

How would I go about performing a transform instead of a margin correction?

[Shikkediel]

I added an example to a previous reply but here’s the whole thing just to be clear:

nav {
font-family: 'Lato', sans-serif;
font-weight: 700;
background-color: #E9E9E9;
box-shadow: 0px 0px 8px 0px #000000;
position: fixed;
width: 95%;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

[Gunteric]

Nice, this works as well. I will use this since it can better support more browsers with less code fluff. I appreciate your help!

[Shikkediel]

Glad to help. Actually, the first approach has the deepest browser support but transforms should go back a long time too by now.

[josh]

Glad this is working now. Just to offer an alternative, possibly simpler solution. As you’re using fixed positioning, and you’ve set the width of the nav to 95%, you could actually just use the following:

left: 2.5%;
right: 2.5%;

With the above, you wouldn’t even need to set the width to 95% as it would naturally be that anyway.

In regards to fixed (and absolute) positioning, that removes the element from the natural flow of the document. What that means is that the affected element no longer stacks along with every other element; it now exists on its own layer essentially, above the rest of the document. This is why using left and right margins of “auto” won’t work.

[Author]

Posts