Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by André Felipe
André Felipe
3,421 Points

Could you help me with this rebel nav?

http://www.rodrigues-freire.com.br/

why the menu doesn't stay at the center of the page, the margin is auto in both sides....

I have 3 stylesheets... but I can't figure out what's happening

8 Answers

Máté Végh
Máté Végh
25,607 Points

Hey André,

Just add this to your main stylesheet:

@media (min-width: 768px) {
  .navbar-nav {
    float: none;
  }
}

This will overwrite the default Bootstrap stylesheet (this is how I meant to remove the float). It should be good now.

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hi,

The auto margin you added to the .navbar makes no sense to those nav items because it's a full width block element. If it had a width like 660px, than it would make effect, but that's not a good solution.

First of all, you need to center the parent element of the nav items, which is .navbar-nav, not the .navbar. A quick and easy way to do it is setting the display to inline block, then give the parent element (.navbar-collapse) a text align center. Inline elements can be aligned with text align. Lastly, remove the float on .navbar-nav and you are good to go.

Hope this helps.

André Felipe
André Felipe
3,421 Points
André Felipe
André Felipe
3,421 Points

Thank you very much for the attention Matt!

I'll give it a look later and feedback you.

Best!

Máté Végh
Máté Végh
25,607 Points

You are welcome!

Andrew Gomersall
Andrew Gomersall
13,840 Points
Andrew Gomersall
Andrew Gomersall
13,840 Points

Hi André,

You have alot of useless code in your html. Try stripping it down to the very basics then work from there. To fix your problem with centering your nav, In your css you have:

(min-width: 768px) .navbar-nav>li

This has float: left;

This is causing you the problem. Just remove the float left and add:

display: inline-block;

Then make sure your containing element is 100%. ".navbar-nav"

André Felipe
André Felipe
3,421 Points
André Felipe
André Felipe
3,421 Points

tnx andrew!!!

Got it .... yeah, it's a template... now i'm really learning here.... gonna try it out and turn to post here when fixed.

best

André Felipe
André Felipe
3,421 Points
André Felipe
André Felipe
3,421 Points

Hey guys, can't deal with it.... the code seems to be too dirty...

it's a W3 layouts template,

I've removed the float, and added the text align and inline-block values and it couldn't fix it

i have 3 stylesheets. agency.css (main stylesheet) bootstrap.css and bootstrap.min.css

don't know what to do and don't have much time avaiable for troobleshooting this!

but thanks for all, and i'll keep trying to fix it

Andrew Gomersall
Andrew Gomersall
13,840 Points
Andrew Gomersall
Andrew Gomersall
13,840 Points

Add a width of 100% to the .navbar-nav.

Regards, Andy

André Felipe
André Felipe
3,421 Points
André Felipe
André Felipe
3,421 Points

Wow! It Worked! Thank you very much matt and andy!

Best!