Bummer! You must be logged in to access this page.

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

General Discussion

Posted by nicholas maddren
nicholas maddren
12,793 Points

100% Width Nav Bar Bootstrap

I want to span my navbar to the end of each side of the viewport. How can I do this? Due to Bootstraps grid system I'm unsure how this can be done. Any tips would be great thanks, I need it to be responsive so will I need to develop this with custom CSS?

Thanks, Nick

3 Answers

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

depends on how your html is structured but you can use width: 100vw which is only available on newer browsers but it will be 100% of the viewport width. 100% should also work if the parent element is spanning the full width of the viewport already.

Janek Rezner
Janek Rezner
12,973 Points
Janek Rezner
Janek Rezner
12,973 Points

just need to have it outside of any containers / divs with .row classes etc.

i had some problems with this the first time I tried to use it.

watch this if you cant get it right.

to make it collapse you need to add .navbar-collapse class (it requires your bootstrap.js and jQuery to be properly linked). doesnt work when javascript is not enabled

nicholas maddren
nicholas maddren
12,793 Points

I've watched the video, the only issue is that I am using this JQuery plugin:

http://lirancohen.github.io/stickUp/#installation

I can get it to span across the screen when using the navbar-fixed-top class however it then overlaps my logo as my logo sits above my navbar. I want the page to scroll past the logo then when it reaches the navbar I want it to stick to the top of the viewport.

Any other tips?

Janek Rezner
Janek Rezner
12,973 Points

forget your plugin! bootstrap has a build in version of it and THIS is how they do it

nicholas maddren
nicholas maddren
12,793 Points

So I've had a good look at the documentation and I've tried implementing it however it doesn't span across the whole viewport. I'm a bit confused to how the Affix plugin works as there are limited tutorials on them.

Thanks

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

I'd need it to work on slightly older browsers also :(