title: Scrolling navbar (navbar-fixed) only on Desktop
body: <p>I want to make a navbar that scrolls with the site.<br>
  Now, if I just wanted that, I'd just add <code>.navbar-fixed</code> and call it a day.<br>
  However, I want that only on desktop.<br>
  On mobile, I want it to stay at the top.  </p>
  
  <p>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).</p>
  
  <p>The code for my navbar is very simple with no additional CSS.:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navbar"&gt;
      &lt;nav&gt; 
          &lt;div class="nav-wrapper container"&gt; 
              &lt;a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative"&gt;
                  &lt;img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png"&gt;
              &lt;/a&gt;             
              &lt;ul id="nav-mobile" class="right"&gt; 
                  &lt;li&gt;
                      &lt;a href="#" data-activates="side-nav-150" class="button-collapse show-on-large"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
                  &lt;/li&gt;                 
              &lt;/ul&gt;             
          &lt;/div&gt;         
      &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>so tl;dr:<br>
  On desktop: make it like it's having <code>.navbar-fixed</code>.<br>
  On phone: make like it doesn't have <code>.navbar-fixed</code>.</p>