title: Bulma: banner on top of navbar when at top of page
body: <p>I am trying to make an Wordpress Theme using the Bulma framework with a banner on top of my menu. I have tried the following with the <strong>navbar is-fixed-top</strong> class under a <strong>navbar</strong> class to get the look I desire but the <strong>navbar is-fixed-top</strong> still shows above <strong>navbar</strong> when I write some JS to change the CSS when at the top of the page but it still stays with the <strong>is-fixed-top</strong> on top. I might just be missing something simple but any help will be great. I am adding snipes of my code but the content has been changed.</p>
  
  <p>header.php</p>
  
  <pre><code>...
  &lt;body&gt;
    &lt;header class="header"&gt;
    &lt;div class="container"&gt;
      &lt;nav class="navbar" id="banner"&gt;
        &lt;div class="navbar-menu"&gt;
          &lt;div class="navbar-brand"&gt;
            &lt;a href="&lt;?php echo get_home_url(); ?&gt;"&gt;
              &lt;h1 class="title"&gt;&lt;?php bloginfo( 'title' ); ?&gt;&lt;/h1&gt;
              &lt;h2 class="subtitle"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/h2&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-start"&gt;
          &lt;/div&gt;
          &lt;div class="navbar-brand"&gt;
            &lt;?php
              if ( function_exists( 'the_custom_logo' ) ) {
                the_custom_logo();
              }
             ?&gt;
          &lt;/div&gt;
          &lt;div class="navbar-end"&gt;
          &lt;/div&gt;
          &lt;div class="navbar-brand"&gt;
            &lt;div class="columns"&gt;
              &lt;div class="column"&gt;
                &lt;p class="title is-5"&gt;Mailling address&lt;/p&gt;
                &lt;p&gt;P.O. Box 1234&lt;/p&gt;
                &lt;p&gt;Test, ST 12345&lt;/p&gt;
              &lt;/div&gt;&lt;!-- /column--&gt;
              &lt;div class="column"&gt;
                &lt;p class="title is-5"&gt;Physical address&lt;/p&gt;
                &lt;p&gt;1234 Foobar Ave.&lt;/p&gt;
                &lt;p&gt;Test, ST 12345&lt;/p&gt;
              &lt;/div&gt;&lt;!-- /column--&gt;
            &lt;/div&gt; &lt;!-- /columns --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
    &lt;nav class="navbar is-fixed-top" id="topnavbar"&gt;
      &lt;div class="navbar-menu"&gt;
        &lt;div class="navbar-start"&gt;
        &lt;/div&gt;
        &lt;?php if( is_front_page() ) {?&gt;
          &lt;div class="navbar-start"&gt;
            &lt;a class="navbar-item" href="#1"&gt;1&lt;/a&gt;
            &lt;a class="navbar-item" href="#2"&gt;2&lt;/a&gt;
            &lt;a class="navbar-item" href="#3"&gt;3&lt;/a&gt;
          &lt;/div&gt; &lt;!-- /navbar-start  --&gt;
          &lt;div class="navbar-end"&gt;
            &lt;a class="navbar-item" href="#4"&gt;4&lt;/a&gt;
            &lt;a class="navbar-item" href="#5"&gt;5&lt;/a&gt;
            &lt;a class="navbar-item" href="#6"&gt;6&lt;/a&gt;
          &lt;/div&gt; &lt;!-- /navbar-end --&gt;
        &lt;?php }
        else {?&gt;
          &lt;div class="navbar-start"&gt;
            &lt;a class="navbar-item" href="&lt;?php echo get_home_url();?&gt;#1"&gt;1&lt;/a&gt;
            &lt;a class="navbar-item" href="&lt;?php echo get_home_url();?&gt;#2"&gt;2&lt;/a&gt;
            &lt;a class="navbar-item" href="&lt;?php echo get_home_url();?&gt;#3"&gt;3&lt;/a&gt;
          &lt;/div&gt; &lt;!-- /navbar-start  --&gt;
          &lt;div class="navbar-end"&gt;
            &lt;a class="navbar-item" href="&lt;?php echo get_home_url();?&gt;#4"&gt;4&lt;/a&gt;
            &lt;a class="navbar-item" href="&lt;?php echo get_home_url();?&gt;#5"&gt;5&lt;/a&gt;
            &lt;a class="navbar-item" herf="&lt;?php echo get_home_url();?&gt;#6"&gt;6&lt;/a&gt;
          &lt;/div&gt; &lt;!-- /navbar-end --&gt;
        &lt;?php
        } ?&gt;
        &lt;div class="navbar-end"&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;!-- /navbar-menu --&gt;
    &lt;/nav&gt;
  &lt;/div&gt;&lt;!-- /container --&gt;
  &lt;/header&gt;
  &lt;div class="body"&gt;
  </code></pre>
  
  <p>foo.js</p>
  
  <pre><code>if (document.body.scrollTop === 0)
  {
    document.getElementById('topnavbar').style.top =
    document.getElementById('banner').height() + '!important';
  }
  else {
   document.getElementById('topnavbar').style.top =
    '0 !important';
  }
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>#topnavbar {
    margin: 0;
  }
  </code></pre>
  
  <p>I have Tried a few other ways but none of them work.</p>