The Bootstrap menu closes by itself after being expanded

I encountered an issue with my media query that is supposed to automatically remove the hamburger menu on a certain resolution. However, when I collapse the menu and then try to expand it, it closes automatically. Here is the code snippet:

@media (min-width: 768px) {
  .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1200px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-toggler {
    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;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285c465d465b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545312b302b36">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>


<nav class="navbar navbar-inverse navbar-dark bg-dark static-top">
  <div class="container">
    <a class="navbar-brand" href="#">
          <img src="http://placehold.it/150x50?text=Logo" alt="">
        </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 active">
          <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

This issue only occurs when the menu is collapsed and I attempt to expand it. Can you help me identify what went wrong?

htmlcssbootstrap-4

Answer â„–1

The issue lies within the property:

@media (max-width: 1200px) {
  /* ... */
  .navbar-collapse.collapse {
    display: none !important;
  }
}

Bootstrap applies a collapse class to your menu after the animation. By overriding the default behavior, you are hiding the menu for all resolutions below 1200px.

I trust this response will be of assistance to you! 😉

@media (min-width: 768px) {
  .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1200px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-toggler {
    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-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;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f0eaf1eaf7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d495348534e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>


<nav class="navbar navbar-inverse navbar-dark bg-dark static-top">
  <div class="container">
    <a class="navbar-brand" href="#">
          <img src="http://placehold.it/150x50?text=Logo" alt="">
        </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 active">
          <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dividing a Price using Django Template Language

I am attempting to achieve a specific functionality in a Django Template Editor where I need to display a quarter of a price. The value quote.total is calculated by the system, such as 1235.00, and I want to manipulate this value to show 308.75 (which is ...

cssdjango

Is there a way to deactivate the parent background div when a child container div is in use?

Is there a way to deactivate the main background container that holds a grid with data? Within this grid, users have options for sorting and exporting the data into formats like csv/pdf. Additionally, there is a filter button on the grid that, when clicked ...

javascripthtmlangularjscss

Tips for exporting JSON-LD and embedding it into an HTML document

Can JSON-LD be stored externally and then linked to an HTML document like so? <script type="text/javascript" src="http://www.example.com/data123.jsonld"></script> I haven't been able to find any information about this online.... ...

htmljsonjson-ld

PHP script for converting HTML lists to plain text

Looking to convert HTML ordered/unordered lists into plain text for export to a txt file? Here's an example: Original HTML: <ol><li>Item 1</li></li>Item 2</li><li>Item 3</li></ol> Desired format: 1. ...

phphtmlregexdomhtml-lists

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: https://i.sstatic.net/3fUNs.png I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" ...

htmlcsswhitespaceline-height

Personalized Bootstrap 4 grid system

Could someone guide me on how to create this grid layout with Bootstrap 4? I am trying to achieve a design where one column stretches from the edge of the window to the inside, while the other column is half the width of a standard .container element. ht ...

cssbootstrap-4grid

What could be preventing my XPath from selecting a link/button using its label text?

<a href="javascript:void(0)" title="home"> <span class="menu_icon">Possibly more content could go here</span> Home </a> When I use //a as the XPath in the above code, it is highlighted. However, when I try //a[contains(text ...

htmlxmlseleniumxpath

Ways to place text over an image

Currently in the process of learning how to use CSS with HTML, I am experimenting with overlapping an image with text. Here is my current code: <style> .aboutus_oven{ background:url('Images/oventemp.jpg') no-repeat center; backgr ...

htmlcssimagetextoverlap

Safari-exclusive bug: jQuery offset() function malfunctioning and producing highly inaccurate results

My goal is to retrieve the top offset values of a series of elements on my webpage. I am cycling through each element and recording its top offset value like this: $(elements).each(function() { var element = $(this); var offset = Math.floor($(elem ...

jquerycsssafaripositionoffset

What is the best way to conceal a specific div by its ID while other divs are being displayed?

There are four divs in total, all sharing the same class. However, each div has a unique ID ranging from 1 to 4. My goal is to employ jQuery to hide 'div id 1' when any of the other divs are visible, and vice versa - meaning if 'Div Id 4&apo ...

javascripthtmljquery

How to Take Out the Active Class from a Dropdown Menu in Angular 2

I am having trouble removing the 'active' class from a dropdown when an option is selected. I have successfully removed it on document click, but need help with removing it on selection. TS : ngAfterViewInit() { const elem = this.ele ...

cssangulartypescriptdrop-down-menuangular2-template

Choose to automatically update the page after adding new information

The information is displayed in this format: <select class="custom-select col-md-10" id="routeList" size="8"> <option selected>Choose...</option> <?php include( '../cnn.php' ); $query= $db ...

phpjqueryhtmlajax

Innovative Functions of HTML5 LocalStorage for JavaScript and TypeScript Operations

Step-by-Step Guide: Determine if your browser supports the use of localStorage Check if localStorage has any stored items Find out how much space is available in your localStorage Get the maximum storage capacity of localStorage View the amount of space ...

javascripthtmltypescriptlocal-storage

Scrollable fixed div

Visit JS Fiddle I am facing an issue with a fixed filter system that is currently positioned at the bottom of the screen. My intention is to animate it popping up later on: <nav></nav> <ul class="filter"> <li>filter option< ...

htmlcss

Cannot adjust Span content with JQuery

I am currently utilizing Bootstrap and JQuery for my project. HTML <div> <ul> <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> </ul> </div&g ...

javascriptjqueryhtmltwitter-bootstrap

Javascript/jQuery for enlarging and shrinking a div

Struggling with a function I'm implementing for a website. My goal is to move and expand a div upon button click, with the text on the button changing to "close". When the close button is clicked, the div should return to its original position. I&apo ...

javascriptjqueryhtmlcssanimation

Bootstrap Collapse feature fails to collapse on Twitter

I'm having trouble with the bootstrap collapse navbar. It expands fine, but I can't seem to collapse the navigation. Everything seems correct in my code: <nav class="navbar navbar-inverse nav-justified"> <div class="navbar- ...

javascriptjquerycsstwitter-bootstrap

The right column in Bootstrap is covering up the left column

Does anyone know why I am encountering an issue with my bootstrap navigation bar? When I try to have two columns in the navigation bar and resize the viewport, the right column overlaps the left one. This issue seems to be happening when the viewport size ...

htmlcsstwitter-bootstrap

Creating a JQuery slider with customizable step sizes

Can the JQuery Slider (range slider / dual slider) be customized to handle non-linear values with inconsistent "step" sizes? I envision a horizontal Slider that looks like this: |----|----|----|----|----|--------|--------|-------------------------|------ ...

javascriptjqueryhtmluser-interfaceslider

What is the best way to retrieve the current date and time in PHP?

How do I get the date and time similar to 05-17-05 at 02:33:15 Can you please assist me in writing this in php? Can I use at with the date function in php? ...

phphtml