Fixed Navbar on different screen sizes - twitter-bootstrap-3

Question

Is there a way to use Bootstrap 3 Fixed Navbar to have it fixed to top on md+ but fixed to bottom on smaller devices?
Currently doing this with two separate navs being hidden and displayed based on screen width. Would much prefer to have one nav that will affix based on screen size but can't figure out how.
I'm front end and do not know JavaScript so please be detailed in any instructions that may include JS!
Thanks in advance.

Answer 1

If you don't want to use javascript for this case, here is my solution.
Since you should use:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
to make the nav fixed to top or:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
to make the nav fixed to bottom you can simply do this insted of those two:
<nav class="navbar navbar-default navbar-position" role="navigation">
And after that:
/* LESS */
#media (max-width: 767px) {
navbar-position {
.navbar-fixed-bottom;
}
}
#media (min-width: 768px) and (max-width: 991px) {
navbar-position {
.navbar-fixed-bottom;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
navbar-position {
.navbar-fixed-top;
}
}
#media (min-width: 1200px) {
navbar-position {
.navbar-fixed-top;
}
}
So, as you see, insted of navbar-fixed-top or navbar-fixed-bottom you can use navbar-position witch inherit navbar-fixed-top or navbar-fixed-bottom classes depending of device type (xs, sm, md, lg)

Answer 2

Pretty simple with a bit of jQuery.
Simply check the width of the browser on load, and if it's equal to or less than 768 pixels wide, add navbar-fixed-bottom to your navbar.
jQuery:
var width = $(window).width(),
height = $(window).height();
if ((width <= 768)) {
$('.navbar').addClass('navbar-fixed-bottom');
}
The variable width gets the width of the window on load, and then the if statement checks to see if it's equal to or less than 768 pixels. If it is, then it appends the appropriate class, otherwise it leaves it alone. You need to fire this on page load, so it'll end up looking more like this:
$(function() {
var width = $(window).width(),
height = $(window).height();
if ((width <= 768)) {
$('.navbar').addClass('navbar-fixed-bottom');
}
});
FIDDLE
Simply make the result pane in the fiddle narrower to simulate a samller device/screen size/window, then hit run to see it flip from top to bottom.
Optionally, you can make it switch from top to bottom even if the user resizes the window. Could come in useful for when a user rotates a mobile device.
$(window).on('load resize', function() {
if($(window).width() <= 768) {
$('.navbar').addClass('navbar-fixed-bottom');
} else {
$('.navbar').removeClass('navbar-fixed-bottom');
}
});
I made a JS Bin for this one because JS Fiddle was acting weird with the load feature. Adjust the size of the output window to see what I'm talking about with this bit of code.