CODEWITHSUNDEEP
csstwitter-bootstrapnavigationresponsive-design
thairish
thairish

Reputation: 1043

Bootstrap collapsed menu not pushing content down when expanded

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.

Upvotes: 28

Views: 89078

Answers (10)

Pranav Sinha
Pranav Sinha

Reputation: 17

I had the same problem, looked at the answers but I got confused as they weren't working for me. So I thought of animating the container so that it goes down and up. I am simply changing the margin-top property of the container when the collapsing button is pressed. Here's my code snippet:

const profileBtn=document.querySelector('#profile-btn');
const arrow=document.querySelector('#arrow');
const menu = document.querySelector(".home-menu");
function changeArrow() {
    if (arrow.className === 'fas fa-angle-double-down') {
        arrow.className = 'fas fa-angle-double-up';
        moveDown();
    }
    else{
        arrow.className = 'fas fa-angle-double-down';
        moveUp();
    }
};

profileBtn.addEventListener('click',changeArrow);

function moveDown() {
  var pos = 80;
  var id = setInterval(frame1, 1);
  function frame1() {
    if (pos === 188) {
      clearInterval(id);
    } else {
      pos+=2;
      menu.style.marginTop = pos + 'px';
    }
  }
};

function moveUp() {
  var pos = 188;
  var id = setInterval(frame2, 1);
  function frame2() {
    if (pos === 80) {
      clearInterval(id);
    } else {
      pos-=2;
      menu.style.marginTop = pos + 'px';
    }
  }
};
.home-menu{
    height:auto;
    width: 70%;
    background: #E3AFBC;
    box-shadow: 2px 2px 20px #9A1750;
    border-radius: 10px;
    color: white;
    margin-top: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <!-- Bootstrap CSS framework -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">

    <!-- Fontawesome icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
          integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
          crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Title</title>
</head>
<body>
<div class="fixed-top">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" id="profile-btn">
      <i class="fas fa-angle-double-down" id="arrow"></i>
    </button>
  </nav>
</div>

<div class="container home-menu">
  <br>
  <a href="#" type="button" class="btn btn-block" style="color: white" data-toggle="modal" data-target="#aboutfamily"><span class="fas fa-user-friends" style="margin-right: 0.6em">
  </span>
    About the Family</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="far fa-calendar-alt" style="margin-right: 0.6em"></span>
    Family Calendar</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="fas fa-mail-bulk" style="margin-right: 0.6em"></span>
    Send Email to everyone</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="far fa-address-book" style="margin-right: 0.6em"></span>
    Contacts</a>
  <br>
</div>


<!-- jquery cdn-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
</script>
<!-- icons -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
</script>
<!-- bootstrap javascript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
</script>
<script src="new.js"></script>
</body>
</html>

Upvotes: 0

James
James

Reputation: 4580

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">

Upvotes: 17

Khyati Chandak
Khyati Chandak

Reputation: 66

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.

Upvotes: 0

MattyIce
MattyIce

Reputation: 19

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();
});

Upvotes: 0

Callat
Callat

Reputation: 3044

navbar-fixed-top.

Having this prevents the pushdown native property of the accordion. You have to massage it out with your own javascript or css.

Upvotes: 1

Jorge Casariego
Jorge Casariego

Reputation: 22212

In my case, it worked changing this

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

for this

<!-- Update using navbar-static-top -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">

and editing my css from this:

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 70px 0 30px 0px;
}

to this:

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 0 0 30px 0px;   /* new padding */
}

Upvotes: 1

AwesomeJackify
AwesomeJackify

Reputation: 31

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/[email protected]"
        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="[email protected]" 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

Upvotes: 2

zinger
zinger

Reputation: 319

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

Upvotes: 1

Bruno
Bruno

Reputation: 6449

I don't know. This seems to work... (kind of a hack though).

.navbar-fixed-top {
  top: -70px; /* you'll have to figure out the exact number here */
}

.navbar-fixed-top, .navbar-fixed-bottom {
  position: relative; /* this can also be static */
}

Upvotes: 8

mbrrw
mbrrw

Reputation: 306

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

Upvotes: 2

Related Questions