Bootstrap navbar behind content

Question

I'm making a web page using bootstrap and i have encountered the following problem with the navbar and the content of the page overlapping. When viewing the page normally everything works fine but the problem occurs when displayed on mobile and a tablet.

What I want to achieve is that when the dropdown button for the navbar is clicked I want the rest of the content to move down. I don't just want to overlay the content with the navbar.

This is my code:

HTML:

 <nav class="navbar navbar-default navbar-custom navbar-centered" role="navigation">
        <div class="container-fluid glavni-meni">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <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="index.html">MNZ Maribor</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="">Tekmovanja</a></li>
              <li><a href="">Klubi</a></li>
              <li><a href="">Reprezentance</a></li>
              <li><a href="">Grassroots</a></li>
              <li><a href="">Klub Klubu</a></li>
              <li><a href="">Obrazci in predpisi</a></li>
              <li><a href="">Trenerji in sodniki</a></li>
              <li><a href="">Delegati</a></li>
              <li><a href="">Razno</a></li>
              <li><a href="">Ugodnosti</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>

      <!--Main content of page-->
      <section id="main-content">
        <div class="container nekaj">
          <div class="col-lg-2 col-md-2 navigation">
            content content content content content content content content content content content content
          </div>
          <!--Beginning of carousel-->
          <div class="col-md-10 col-md-10 galery">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="img/example.jpg" alt="Los Angeles">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="Chicago">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="New York">
                </div>
              </div>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </section>

And my CSS:

.navbar-nav {
  width: 100%;
  >li {
    float: none;
    display: inline-block;
  }
}

.navbar {
  margin-top: 0px;
  margin-bottom: 0px;
  border: none;
  border-radius: 0px;
  font-family: 'Abel', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

.navbar-toggle{
  border-color: #002d68 !important;
  background-color: #ffff01 !important;
}

.navbar-default .navbar-toggle:hover {
    background-color: #ffff01 !important;
}

.navbar-toggle .icon-bar{
  background-color: #002d68 !important;
}

.navbar-brand{
  color: #002d68 !important;
}

.navbar-default {
  background-color: #ffff01;
  height: 40px;
}

.navbar-default .navbar-nav>li>a {
  color: #002d68 !important;
}

.glavni-meni {
  background-color: #ffff01;
}



#main-content{
  background-image: url('../img/football-field.jpg');
  background-repeat:no-repeat;
}

And my mobile CSS:

@media (min-width: 768px) {
  .navbar-brand {
    display: none;
  }
  .navbar-centered .navbar-nav {
    float: none;
    text-align: center;
  }
  .navbar-centered .navbar-nav>li {
    float: none;
  }
  .navbar-centered .nav>li {
    display: inline;
  }
  .navbar-centered .nav>li>a {
    display: inline-block;
  }

  .container-fluid {
    padding-right: 80px;
    padding-left: 80px;
  }
}

If you want to make the menu appear above the page content you can use `z-index` in CSS here's the documentation [z-index](https://www.w3schools.com/cssref/pr_pos_z-index.asp) — JustARandomProgrammer, Jun 16 '17 at 07:59
Possible duplicate of [Bootstrap 3 Navbar Collapse](https://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse) — Mohammad Usman, Jun 16 '17 at 08:00

Mihai T · Accepted Answer · 2017-06-16T09:58:14.793

For your first problem.

The navbar appears on top of content ( better say content is under navbar ) because .navbar-default has a height:40px. You should use height:auto. Add a specific path to overwrite the bootstrap css like body .navbar-default

For second problem

To change the breaking point of the mobile navbar ( to appear earlier than 768px ) you should use this code : change navbar breakpoint ( look at bootstrap 3.1 )

In the below example navbar will appear at 1200px breakpoint

I included the code in the snippet below or > jsFiddle

body .navbar-default  {
 height:auto!important;
}
.navbar-nav {
  width: 100%;
  >li {
    float: none;
    display: inline-block;
  }
}

.navbar {
  margin-top: 0px;
  margin-bottom: 0px;
  border: none;
  border-radius: 0px;
  font-family: 'Abel', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

.navbar-toggle{
  border-color: #002d68 !important;
  background-color: #ffff01 !important;
}

.navbar-default .navbar-toggle:hover {
    background-color: #ffff01 !important;
}

.navbar-toggle .icon-bar{
  background-color: #002d68 !important;
}

.navbar-brand{
  color: #002d68 !important;
}

.navbar-default {
  background-color: #ffff01;
  height: 40px;
}

.navbar-default .navbar-nav>li>a {
  color: #002d68 !important;
}

.glavni-meni {
  background-color: #ffff01;
}



#main-content{
  background-image: url('../img/football-field.jpg');
  background-repeat:no-repeat;
}

@media (min-width: 768px) {
  .navbar-brand {
    display: none;
  }
  .navbar-centered .navbar-nav {
    float: none;
    text-align: center;
  }
  .navbar-centered .navbar-nav>li {
    float: none;
  }
  .navbar-centered .nav>li {
    display: inline;
  }
  .navbar-centered .nav>li>a {
    display: inline-block;
  }

  .container-fluid {
    padding-right: 80px;
    padding-left: 80px;
  }
}
@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

<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>
<nav class="navbar navbar-default navbar-custom navbar-centered" role="navigation">
        <div class="container-fluid glavni-meni">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <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="index.html">MNZ Maribor</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="">Tekmovanja</a></li>
              <li><a href="">Klubi</a></li>
              <li><a href="">Reprezentance</a></li>
              <li><a href="">Grassroots</a></li>
              <li><a href="">Klub Klubu</a></li>
              <li><a href="">Obrazci in predpisi</a></li>
              <li><a href="">Trenerji in sodniki</a></li>
              <li><a href="">Delegati</a></li>
              <li><a href="">Razno</a></li>
              <li><a href="">Ugodnosti</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>

      <!--Main content of page-->
      <section id="main-content">
        <div class="container nekaj">
          <div class="col-lg-2 col-md-2 navigation">
            content content content content content content content content content content content content
          </div>
          <!--Beginning of carousel-->
          <div class="col-md-10 col-md-10 galery">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="img/example.jpg" alt="Los Angeles">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="Chicago">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="New York">
                </div>
              </div>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </section>

this works perfectly :3 thak you mysterious internet stranger ^^ — weinde, Jun 16 '17 at 08:08
Good answer, but could I encourage you not to use all-lower-case for stylistic effect? Posts are much more readable with the correct use of upper-case letters. [Useful reading](https://meta.stackoverflow.com/questions/293779/what-is-the-most-effective-way-of-encouraging-a-user-not-to-make-deliberate-writ), [Useful reading 2](https://meta.stackoverflow.com/questions/350604/why-first-person-singular-lowercase). — halfer, Jun 16 '17 at 09:03
Please do @MihaiT, I will bookmark your profile. Have you written all 432 of your answers in this fashion? That's a lot of extra work for volunteer editors. At the very least I'd like to you fix this one, as a show of goodwill. — halfer, Jun 16 '17 at 09:46
Have a look at the links I've supplied, and see what the community thinks, perhaps? In a community, the views of other people are usually regarded as important. There's nothing authoritarian about my remark, so I've reported your comment for a moderator to look at. I'm not looking to offend you, nor for a fight. I care about the quality of the material here. — halfer, Jun 16 '17 at 10:01
@halfer you should take a break and chill . Don't get so hyped up about some lower case letters. And in case you didn't notice, i edited my answer. — Mihai T, Jun 16 '17 at 10:02

Bootstrap navbar behind content

1 Answers1