Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,836 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.