Bootstrap Collapse Menu Disappears When Resizing Screen

bootstrap collapse menu disappears when resizing screen

If you do not want your navbar links to be collapsed on smaller devices, then you need to remove the <div class="nav-collapse collapse"> element.

The basic structure should look something like this....

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

If you want to keep the responsive functionality, then add the below code to within you container div. This will give you a button to toggle the collapsed menu on smaller devices.

  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

So then the end result would look something like this.

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

Also, you do not have to nest a <ul class="nav"> element within a <ul class="nav"> element for the dropdown menus. The correct structure for you navigation items should look like this.

<ul class="nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Test
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

bootstrap 4 navbar disappears when resizing screen

Of course it will disappear. The navbar-expand-lg class tells it to disappear on screens that are smaller than lg. And you don't have the navbar toggler anywhere. It's all expected behavior.

Take a look at the structure of a working navbar here:

https://getbootstrap.com/docs/4.0/components/navbar/

The navbar-toggler thingy is what appears when the navbar-expand-* class lets things disappear.

And the collapse navbar-collapse classes tell the toggler where those disappeared things are hiding. (I'm using a bit a loose terminology here)

Be careful with the container-fluid class though. Because that sucker is gonna stretch your navbar across the entire screen and people with 4K wide sceens are gonna hate you for that. Use container instead.

Bootstrap 4 navbar disappears on resizing

it's there. hidden on the right. no need to change bg as you did in updated fiddle.

just add class navbar-light
so,

<nav class="navbar navbar-expand-lg fixed-top">
will be

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

and it will be visible.

Bootstrap Nav Disappears on Resize

It isn't clear in your question but your missing the toggle button to open and close the menu when your viewport is reduced, otherwise the mobile menu will always be open.

nav.navbar-default  {  background: #333E48;  border: 0;}.navbar-default .navbar-brand > img,.navbar-default .navbar-brand {  padding: 0px;  margin: 0;}.navbar-default .navbar-brand > img {  padding: 4px;  height: 50px;  margin: auto;  vertical-align: middle;  display: inline-block;}.navbar-default .navbar-brand,.navbar-default .navbar-nav li a {  line-height: 90px;  height: 90px;  padding-top: 0px;}.navbar-default .nav-collapse.collapse {  height: auto !important;  /* From Stack Overflow */  overflow: visible !important;  /* From Stack Overflow */}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><nav class="navbar navbar-default navbar-fixed-top">  <div class="container">    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-collapse" 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.php">        <img src="http://placehold.it/100x50/fff/fff" />      </a>
    </div>    <div class="collapse navbar-collapse" id="bs-collapse">      <ul class="nav navbar-nav navbar-right">        <li><a href="index.php">Home</a>
        </li>        <li class="aktiv"><a href="advertiser.php">Advertisers</a>
        </li>        <li><a href="publisher.php">Publishers</a>
        </li>        <li><a href="#" data-toggle="modal" data-target="#aboutModal">About</a>
        </li>        <li><a href="#" data-toggle="modal" data-target="#pressModal">Press</a>
        </li>      </ul>    </div>  </div></nav>

Bootstrap menu disappears onclick on mobile / & header image wont resize

The reason is simple: Bootstrap 3 JavaScript is not designed to work with Bootstrap 4.

In other words, for Bootstrap 4 css you also need Bootstrap 4 JavaScript (as well as jQuery 3.2.1 and popper.js).

To fix the header image issue add the img-fluid class to the image like so:

<img class="img-fluid" src="img/header-v6.jpg">

This will make the image responsive.

To fix the first issue, use the css and JavaScript files from the following template (and load them in that order):

<!doctype html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  </head>  <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">    <div class="container">        <a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">            <span class="navbar-toggler-icon"></span>        </button>        <div class="collapse navbar-collapse" id="navbarResponsive">            <ul class="navbar-nav ml-auto">                <li class="nav-item">                    <a class="nav-link js-scroll-trigger" href="index.php">Home</a>                </li>                <li class="nav-item">                    <a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>                </li>                <li class="nav-item">                    <a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>                </li>                <li class="nav-item">                    <a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>                </li>                <li class="nav-item">                    <a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>                </li>                <li class="nav-item">                    <a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>                </li>            </ul>        </div>    </div></nav>
<div class="container mt-5 pt-5">    <div class="row">        <div class="col">            <h1>Hello, world!</h1>        </div>    </div></div>
    <!-- Optional JavaScript -->    <!-- jQuery first, then Popper.js, then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>  </body></html>

Navbar disappears after resizing screen [Bootstrap]

The navbar is there but all white so you can't see it.

Add the navbar-default class to the nav element in order to get bootstraps default style / theme:

<nav class="navbar navbar-default navbar-static" role="navigation">

Bootstrap navbar hide menu elements when resizing

The responsive Bootstrap Navbar has only two "states"...

• Collapsed (vertical)
• Non-collapsed (horizontal)

The navbar-expand-* class is used to change the breakpoint between the two states.

In your case, you want to maintain the "non-collapsed" horizontal Navbar state, but gradually move nav items to a collapsed menu as needed. Bootstrap 4 doesn't provide an "out-of-the-box" solution for this.

However, using the Bootstrap dropdown menu, and some jQuery logic you can progressively move the overflowing navbar items to the dropdown. Here's the jQuery logic I wrote for this:

var autocollapse = function (menu,maxHeight) {
    
    var nav = $(menu);
    var navHeight = nav.innerHeight();
    if (navHeight >= maxHeight) {
        $(menu + ' .dropdown').removeClass('d-none');
        $(".navbar-nav").removeClass('w-auto').addClass("w-100");
        while (navHeight > maxHeight) {
            //  add child to dropdown
            var children = nav.children(menu + ' li:not(:last-child)');
            var count = children.length;
            $(children[count - 1]).prependTo(menu + ' .dropdown-menu');
            navHeight = nav.innerHeight();
        }
        $(".navbar-nav").addClass("w-auto").removeClass('w-100');
    }
    else {
        var collapsed = $(menu + ' .dropdown-menu').children(menu + ' li');
      
        if (collapsed.length===0) {
          $(menu + ' .dropdown').addClass('d-none');
        }
      
        while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
            //  remove child from dropdown
            collapsed = $(menu + ' .dropdown-menu').children('li');
            $(collapsed[0]).insertBefore(nav.children(menu + ' li:last-child'));
            navHeight = nav.innerHeight();
        }

        if (navHeight > maxHeight) { 
            autocollapse(menu,maxHeight);
        }
    }
}

Demo: https://codeply.com/go/IETSah3bFG

This works by checking the height of the Navbar as the screen is resized (or page loaded). When the height has increased, the nav items have wrapped and then items are moved to the dropdown. When there are no wrapping nav items, the items are removed from the dropdown.

---

Also see: "Mashable" style navbar

---

Related Topics