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

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

Why isn't my Bootstrap nav working?

Hey guys! The situation... I have two navbars one displays for tablets and mobiles, the other is for larger devices. The reason I didn't use the collapsing responsive feature is because the larger navbar couldn't really be used for smaller devices.

My nav bar changes when it reaches 768px and displays a nav that is fixed to the top of the viewport. The problem I am having is making this a tabbed mobile menu.

If you take a look here: http://www.dealerbyte.co.uk/

You will notice when you make the viewport smaller it doesn't turn into a mobile tabbed menu and when you scale the viewport further down you will notice it eventually does turn into a tabbed menu but the button doesn't toggle the menu and the "Used Cars" link is in-line with the logo.

Could anyone possible show me a JSfiddle or anything to sort this?

Thanks

1 Answer

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

.navbar-brand in the bootstrap.min.css file is floated left which is causing the first <li> to appear directly inline with the logo. Add a css rule for:

.navbar-brand { 
    float: none; 
}

You need to remove the fixed positioning of the tabbed navbar since it will be exposed all the time to allow the content of the site to sit below the header.

.navbar-fixed-top, .navbar-fixed-bottom {
    position: relative;
}

I would also remove /hide the hamburger button in the top right if it will not serve any purpose.