How to move Bootstrap Navbar lower on page

Question

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.

Here is my header html:

  <header class="banner navbar navbar-default navbar-static-top" role="banner">
  <div class="container">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target=".navbar-    collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="<?php echo home_url(); ?>/">
  <?php bloginfo('name'); ?>
  </a>
  </div>

  <nav class="collapse navbar-collapse" role="navigation">
  <?php
    if (has_nav_menu('primary_navigation')) :
      wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 
     'nav navbar-nav')); endif; ?>
    </nav>
   </div>
 </header>

Current Less/CSS pertaining to the Nav area (this is mostly stock from the Bootstrap variables.less file):

 @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;

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!

Solution 1

Start reading http://getbootstrap.com/components/#navbar Bootstrap beside the default navbar provide different types of navbars Fixed to top, Fixed to bottom and Static top. You set the type by adding a class to your <nav class="navbar navbar-default" role="navigation">

In your code you use navbar-static-top. You can add a margin-top to it to set it to a lower position:

<nav class="navbar navbar-default" role="navigation" style="margin-top:100px;"> or .navbar-static-top{margin-top:100px;}

Solution 2

Try using this class navbar-fixed-top. This will pull the menu bar to the top of the web page. This is may be how you should probably be doing it. <header class="banner navbar navbar-default navbar-static-top" role="banner">