title: How to move Bootstrap Navbar lower on page
body: <p>I am using the Roots theme for Wordpress currently and am trying to figure out how I can move the bootstrap based navbar lower on my page. Currently it is pushed to the very top of the page and I cannot figure out how to make it go below a background image. It is right now sitting on top of a background image, when I would like the navbar to be below it.</p>
  
  <p>Here is my header html:</p>
  
  <pre><code>  &lt;header class="banner navbar navbar-default navbar-static-top" role="banner"&gt;
    &lt;div class="container"&gt;
    &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" 
          data-target=".navbar-    collapse"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class="navbar-brand" href="&lt;?php echo home_url(); ?&gt;/"&gt;
    &lt;?php bloginfo('name'); ?&gt;
    &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;nav class="collapse navbar-collapse" role="navigation"&gt;
    &lt;?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(array('theme_location' =&gt; 'primary_navigation', 'menu_class' =&gt; 
       'nav navbar-nav')); endif; ?&gt;
      &lt;/nav&gt;
     &lt;/div&gt;
   &lt;/header&gt;
  </code></pre>
  
  <p>Current Less/CSS pertaining to the Nav area (this is mostly stock from the Bootstrap variables.less file):</p>
  
  <pre><code> @media (min-width: @screen-lg) { .navbar{ width: 940px;} }
   @navbar-height:                    55px;
   @navbar-margin-bottom:             @line-height-computed;
   @navbar-default-color:             #777;
   @navbar-default-bg:                @brand-medalist;
   @navbar-default-border:            darken(@navbar-default-bg, 6.5%);
   @navbar-border-radius:             @border-radius-base;
   @navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
   @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
   @nav-link-padding:                          10px 15px;
  </code></pre>
  
  <p>I'm having trouble figuring out what CSS I can manipulate here in my app.less file or variable.less file to push the navbar down like I said before. I tried to put an image div above the header class, but I don't know if that's considered best practice or not. Please let me know if you need anything else from me. I am a bit confused on where to go from here. Thanks!</p>