Bootstrap collapsed menu not pushing content down

Question

I am using Twitter Bootstrap to play around with the responsive side of a website. I am having a problem however with the smaller widths where the collapsed menu is going over the content of the page, rather than pushing it down.

I used this example to build my navigation:

http://getbootstrap.com/examples/navbar-fixed-top/

Looking at the example, it doesn't push the content down either.

I've seen some answers to this to use padding on the body, but this has not worked for me. I've also tried putting overflow on some elements but its made no difference.

My code for the navigation is:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <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>

        <h1 class="logo-title">
            <a href="index.html"><span>Logo</span></a>
        </h1>

      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

I'm new to Responsive Design and have seen many websites with the collapsed menu pushing down the content. Is it good practice to have collapsed menus like this or is it a pure preference thing?

My main question is how can I get the content to be pushed when the collapsed menu is active?

Thank you in advance for the help.

Answer 1

Mention one "id" in data-target and add that "id" in the "div" which have collapse navbar code. As below:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <h1 class="logo-title">
                <a href="index.html"><span>Logo</span></a>
            </h1>
          </div>
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">item1</a></li>
              <li><a href="#">item2</a></li>
              <li><a href="#">item3</a></li>
              <li><a href="#">item4</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

This data-target calls a particular "id" and on the base of that your navbar will toggle.

Answer 2

THIS WORKS!!

Had the same issue and all the answers here revert to a static nav bar which is not what you're looking for.

Throw a blank div tag (with height) after the nav bar but before the start of your content. This empty div pushes the content down and remains hidden behind the nav bar. Use javascript/jquery to toggle on the div for the two mobile widths.

HTML

</nav>
<div class="container main">
<div id="pushContent"></div>

CSS

@media (max-width: 767px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

@media (max-width: 480px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

Javascript/jquery

$('.navbar-toggle').on("click", function(){
    $('#pushContent').slideToggle();
});

Answer 3

If you are using a fixed navbar expanding the menu won't push down the content. For that you have to use static header itself. Check the bootstrap example link you gave as reference.

<nav class="navbar navbar-light bg-light navbar-expand-lg static-top">

Answer 4

part 1: What I did was wrap all the elements you want to move

var icon = document.getElementsByClassName("icon-bars");
var pushDown = document.getElementById("push");

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "push";
    }
  })
});

form {
  max-width: 500px;
  margin: 0px auto;
  text-align: center;
}

input, textarea {
  border: 3px solid #f47909;
  padding-bottom: 10px;
}

input:focus, textarea:focus {
  outline: none;
  border: 3px solid #f2a25a;
}

label {
  display: block;
  margin-bottom: 20px;
}

span {
  display: block;
}

textarea {
  max-height: 200px;
  height: 200px;
  width: 300px;
  max-width: 300px;
}


/*rest same as index.css*/

*{
  font-family: 'futura';
}

.navvy {
  border-radius: 0px;
  margin: 0px;
  height: 70px;
  padding-top: 5px;
}

@media screen and (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    li{
      padding-right: 30px;
      font-size: 19px;
    }
}

@media screen and (max-width: 767px) {
    .navbar-collapse {
      margin-top: 15px;
      background-color: #FAFAFA;
    }
    li {
      font-size: 17px;
    }
}

.icon-bar {
  background-color: #337ab7;
}

.icon-bar-light {
  background-color: #23527C;
}

#li-back:hover {
  background-color: #FAFAFA;
  font-size: 20px;
  font-weight: bolder;
}

.navbar-brand {
  font-size: 25px;
  color: #1d78c6;
}

#footer {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 2px dotted #8bc771;
  text-align: center;
}

#description {
  margin-top: 20px;
  text-align: center;
  font-size: 30px;
}

.push{
  transition: transform 0.5s;
  transform: translate(0px, 160px);
}

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}

<!doctype html>
<html lang="en">
<head>
    <title>VirusFun</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

    <link rel="stylesheet" href="/css/contacts.css" type="text/css">

</head>
<body>
  <div class="introPic">

  </div>
  <nav class="navbar navbar-default navbar-static-top navvy">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <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">Virus Fun</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1" role="navigation">
        <ul class="nav navbar-nav">
          <li><a id="li-back" href="index.html">Home</a></li>
          <li><a id="li-back" href="gallery.html">Gallery</a></li>
          <li><a id="li-back" href="#">About</a></li>
          <li><a id="li-back" href="contacts.html">Contacts</a></li>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div id="push" class="">
    <!--The blurb -->
    <p id="description">Ask whatever you want!</p>

    <!-- The body -->
    <div class="container-fluid">
      <form action="https://formspree.io/[e-mail]"
        method="POST">

        <div class="row">
          <div class="col-sm-6 col-xs-6">
            <label id="name">
              <span>Your Name</span>
              <input tabindex="1" placeholder="John Smith" type="text" name="name">
            </label>
          </div>
          <div class="col-sm-6 col-xs-6">
            <label id="email">
              <span>Your Email</span>
              <input tabindex="2" placeholder="[e-mail]" type="email" name="Sender">
            </label>
          </div>
        </div>

        <label>
          <span>Your Message</span>
            <textarea tabindex="3" name="message"></textarea>
        </label>
        <div class="send">
            <input tabindex="4" type="submit" value="Send">
        </div>
      </form>
    </div>
    <footer id="footer">
        <p>© 2017 VIRUS FUN ALL RIGHTS RESERVED</p>
    </footer>
  </div>

    <!--need this code to be declared before javascript-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="/javascript/javascript.js"></script>

    <script src="jquery/jquery-3.1.1.min.js"></script>

</body>
</html>

with a div Then give it an id which we will get elements by id later with javascript After that make an empty class in the same div

part 2: Go to your css and add a transition. Don't worry, if you don't know I have the source code here--->

.push{
    transition: transform 0.5s;
    transform: translate(0px, 160px);
}

Although this class is not in the div with the id yet, javascript will handle this soon. tip: If you want to get fancy with how the elements will revert back to orignial position, add another transition for when it will come back up--->

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}

The translate measurements are based on twitter bootstrap collapse menu with 4 elements inside.

part 3: The javascript! Find the button for the collapse menu. Should look like this-->

<button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">'

As you can see something is different from the getbootstrap.com example. I have added an icon-bars class. This is so I can find it with-->

var icon = document.getElementsByClassName("icon-bars");

You will also need to find the div which wraps the elements needed to be pushed down.

var pushDown = document.getElementById("push");

Now this is the juicy part!

I am going to show you how to do it in jquery. Here's the code and the explanation is at the bottom--->

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "push";
    }
  })
});

Explanation: -First of we declare this is jquery.

-Then I will check whether the toggle collapse button is clicked, by adding the event handler of click to the first element in the icon list. Because I created only one icon-bars class, the first element of the list will always be the one I targeted.

-Next, I will check if I should make the elements slide up or down depending on if the classes match the conditional statements. Don't need much explaining on the logic as it is pretty straightforward even if you have never tried the hasClass func.

Thats it.

Butt....... It is not good yet. There is a bug where if you double click the toggle button, the collapse menu transition has not yet finished so our push transition goes back up reversing the order. Try it here. Hope there will be some help.

ps. Ignore all the styling in my snippet

-Jack beginner front end web developer

Answer 5

There are many ways you could do that.

One would be to toggle a class on .container or whatever element wraps your content below the navigation.

For example:

.container {
  transition: padding 500;
}

.container-is-open {
  padding-top:200px;
}

Answer 6

Also to avoid the white space created below the navbar, add the following line to the first "div" after the navbar, e.g: jumborton

.jumbotron {
    margin-top: -20px;
}