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

Question

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?

Answer 1

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

Answer 2

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; } }

Answer 3

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();
});