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
Bartosz Brzezinski
4,468 PointsConvert default navbar on desktop to fixed top on mobile.
I'm working on a prototype website. When viewed on desktop, I would like my website to have a main navigation that's below a logo and spanning full width of the main container, so essentialy a default bootstrap navbar setting. On mobile, however, I would like that navigation to be static on top of the browser window with a collapsible button, and with a brand image on the left hand side of it. How could that be done? I'm stuck because the class for the desktop navigation I want is navbar-default and for mobile it's navbar-static-top. Would I include both of them in the html?
3 Answers
Robert Richey
Courses Plus Student 16,352 PointsAre you using Bootstrap?
<div class="navbar-static-top visible-xs-block">
<!-- this element will be visible at xs device width -->
</div>
<div class="navbar-default hidden-xs">
<!-- this element will be visible for all device widths except xs -->
</div>
Otherwise, use media queries to control what is visible/hidden. I don't have any experience with Foundation, but I imagine the solution will be similar.
or, toggle between those classes using jQuery
var screen-xs = 767;
// an assumption is made here that the targeted div will have a static identifier, like class="navbar"
// this initializes the navbar on screen load with an appropriate class
if (window.innerWidth <= screen-xs) {
$(".navbar").addClass("navbar-static-top");
} else {
$(".navbar").addClass("navbar-default");
}
// if you want these classes to toggle when a desktop user shrinks the browser width to an xs width - or from xs to larger
$(window).resize(function() {
if (window.innerWidth <= screen-xs) {
$(".navbar").removeClass("navbar-default");
$(".navbar").addClass("navbar-static-top");
} else {
$(".navbar").removeClass("navbar-static-top");
$(".navbar").addClass("navbar-default");
}
});
Bartosz Brzezinski
4,468 PointsI'm using bootstrap, for now. Wouldn't the first approach affect the structure of the website for accessibility purposes? The website is intended to be accessible to visually impaired users. Won't I end end up with two navigations for screen readers to go through?
Robert Richey
Courses Plus Student 16,352 PointsAccessibility is a new frontier for me, but I've been reading that perhaps adding the attribute aria-hidden=true may work, to prevent the screen reader from reading both elements.
Bartosz Brzezinski
4,468 PointsI know this theme is not based on bootstrap, but this is the kind of functionality I am looking for:
Nijad Kifayeh
6,092 PointsAll that theme is doing is collapsing the top navbar and hiding the bottom navbar when viewed in mobile view.
since you are using bootstrap, http://getbootstrap.com/components/#navbar should have the code to create a collapsing navbar.
as for the second navigation, just add a CSS media query which hides that UL at smaller view ports.