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 Marie Orriss
Marie Orriss
7,432 Points

Help with bootstrap nav-centering menu list items

Hi, creating my first responsive nav here and can't seem to get the list items to center properly. When you click on the hamburger button the fist list item will not align to the other children. Appreciate your help in advance! You can view html and css here http://codepen.io/marieorriss79/pen/WxPqAg

4 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

adding margin top to just the home button will fix it...here you go...

      <li class="nav-item active">
        <a class="nav-link thisOne m-t-1" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>Home</a>
      </li>

You may need to add a media query when the nav goes across the screen so that the margin is removed else i think the home button will end up not in line with the rest.

Marie Orriss
Marie Orriss
7,432 Points
Marie Orriss
Marie Orriss
7,432 Points

Hi Erik thanks yes it worked when I added a margin to the media query! My only last issue remaining is when the hamburger button is clicked the list displays to the right before centering. I haven't been able to find an answer for that one either!

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I'm playing with it and, I know it is coming from the .navbar-toggle class. You can actually remove that class and use pull-xs-right on the button class. This will accomplish the same thing and move the burger to the right. However that doesn't take care of the nav shifting. I'm sorry, I don't know what else to suggest.

Marie Orriss
Marie Orriss
7,432 Points
Marie Orriss
Marie Orriss
7,432 Points

Ok yes, I tried that as well with no luck, I will keep on trying, thanks!