Scrolling navbar (navbar-fixed) only on Desktop - css

Question

I want to make a navbar that scrolls with the site.
Now, if I just wanted that, I'd just add .navbar-fixed and call it a day.
However, I want that only on desktop.
On mobile, I want it to stay at the top.
Is there a way I can do that?
I've looked into jQuery for this, but everybody says I should use media queries for this (to which I do agree).
The code for my navbar is very simple with no additional CSS.:
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<i class="material-icons">menu</i>
</li>
</ul>
</div>
</nav>
</div>
so tl;dr:
On desktop: make it like it's having .navbar-fixed.
On phone: make like it doesn't have .navbar-fixed.

Answer 1

You have 2 solutions for this .
1. Using CSS media queries .
1.a. First make your navbar fixed using position:fixed , and then under
767px ( which is mobile ) change it to position:relative or
absolute depending on what you want.
See snippet below or > jsFiddle
.content {
height:200px;
width:100%;
background:red;
}
.navbar {
position:fixed;
width:100%;
top:0;
left:0;
}
#media only screen and (max-width: 767px) {
.navbar {
position:relative;
}
}
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<i class="material-icons">menu</i>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>
1.b. You can also make a media query for desktop only.
See snippet below or > jsFiddle
.content {
height: 200px;
width: 100%;
background: red;
}
#media only screen and (min-width: 767px) {
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
}
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<i class="material-icons">menu</i>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>
2. Use jQuery for this and add class navbar-fixed in html and remove it when on mobile. See below or > jsFiddle
var wWidth = $(window).width()
if ( wWidth < 767) {
$(".navbar").removeClass("navbar-fixed-top")
}
.content {
height: 200px;
width: 100%;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<i class="material-icons">menu</i>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>

Answer 2

using #Mihai T's (I don't know how to tag people here on SO) post as inspiration and a bit of a guide, I managed to get a working solution:
#media only screen and (max-width: 767px)
{
.navbar-fixed nav
{
position: relative;
}
.navbar-fixed
{
position: relative;
height: 56px;
z-index: 998;
}
}
Thanks for the help :D