CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3responsive-designsemantic-markup
yaserso
yaserso

Reputation: 2868

Bootstrap navbar-fixed-bottom on desktop and navbar-static-top on mobile?

Is there a way to keep the Bootstrap Navbar be navbar-fixed-bottom when it's on mobile, and navbar-static-top when on desktop? I was thinking of creating two navbars and hiding one and showing the other, though I'm not sure if that's fine; on a related note, is it alright to use two nav elements with the same role?

Upvotes: 7

Views: 6708

Answers (3)

topher
topher

Reputation: 1397

This code works for me, and should be easy to understand.

var win = $(this);      // browser window
var nav = $('.navbar'); // your navigation bar

function switchNavbar() {
    if (win.width() < 768) { // on mobile
        nav.removeClass('navbar-static-top');
        nav.addClass('navbar-fixed-bottom');
    } else { // on desktop
        nav.removeClass('navbar-fixed-bottom');
        nav.addClass('navbar-static-top');
    }
}

// On first load
$(function() {
    switchNavbar();
});

// When browser resized
$(window).on('resize', function(){
    switchNavbar();
});

Upvotes: 2

dotcomly
dotcomly

Reputation: 2214

You can use media queries:

<nav class="navbar navbar-default navbar-static-top" role="navigation">

@media (max-width:767px) { .navbar-static-top { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; } }

Upvotes: 2

sitaram9292
sitaram9292

Reputation: 171

You can also do this by adding and removing the class of the navbar using javascript jquery according screen width. 

if ($(window).width() > 330) {
 $('.navbar').addClass('navbar-static-top');
}
else
{
 $('.navbar').addClass('navbar-fixed-bottom');
}

It will work for sure

Upvotes: 3

Related Questions