Encountering a hiccup with the Bootstrap navbar when attempting to create a collapsible feature

I recently obtained a code sample for a navigation bar from w3schools.com that utilizes bootstrap. The code is as follows:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>

  </div>
</nav>

The current state of this navbar functions correctly. However, I encountered an issue with how the navbar behaves on small screens when in collapsible mode. To address this, I added 

data-toggle="collapse" data-target="#myNavbar"
to all <li> elements. This adjustment allowed the navbar to collapse when clicking on any navigation option.

A video demonstrating the issue can be viewed here: https://i.sstatic.net/fCx1i.gif

Below is the updated code reflecting these changes:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a data-toggle="collapse" data-target="#myNavbar"  href="#">Page 1</a></li>
        <li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
        <li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 3</a></li>
      </ul>
    </div>

  </div>
</nav>

Despite resolving the small screen issue, there seems to be a glitch with the entire navbar on larger screens (desktop). Any assistance in addressing this would be greatly appreciated.

If you notice any replication or have suggestions on potential solutions, please feel free to provide your input.

For reference, the problematic HTML code for desktop screens in various browsers can be found below:

<html>
  <title>Example</title>    
<body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a data-toggle="collapse" data-target="#myNavbar"  href="#">Home</a></li>
            <li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
            <li><a data-toggle="collapse" data-target="#myNavbar"  href="#">Page 3</a></li>
          </ul>
        </div>

      </div>
    </nav>
      
    <div class="container">
      <h3>Collapsible Navbar</h3>
      <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
      <p>Only when the button is clicked, the navigation bar will be displayed.</p>
    </div>
    
    </body>
    </html>
    </body>
</html>

To view the glitch on a desktop screen, click on expand snippet.

htmlcssbootstrap-4navbarvisual-glitch

Answer №1

Have you considered a more efficient method to collapse the navbar? You could enhance the functionality with some lines of JavaScript since you are already utilizing jQuery. Here's an example-

$('.navbar-nav>li>a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});
<title>Modified Example</title>

<body>
  <!DOCTYPE html>
  <html lang="en">

  <head>
    <title>Bootstrap Modification</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>

  <body>

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
          <a class="navbar-brand" href="#">NewWebsiteName</a>
        </div>

        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </div>

      </div>
    </nav>


    <div class="container">
      <h3>Enhanced Navbar</h3>
      <p>This updated navigation bar is now hidden on smaller screens and replaced by a button in the top right corner (resize this window to see).
        <p>Clicking the button will reveal the navigation bar.</p>
    </div>

  </body>

  </html>
</body>

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

What are some tips for optimizing a responsive website to appear correctly on a Samsung Galaxy S4 using media queries?

When it comes to coding something that will look good on my Galaxy S4 phone screen, I often have to code it in a way that makes it appear huge on my laptop screen. I've been researching media queries and I think I may have found a solution, but I&apos ...

cssmedia-queries

What causes WordPress to take precedence over Bootstrap?

Trying to integrate a Bootstrap theme I created into WordPress, but encountering issues. Despite enqueuing all necessary style sheets without errors in the console, WordPress is interfering with the layout. The rounded circles with images are appearing s ...

htmljquerycsswordpressbootstrap-4

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

javascripthtmlcssreactjsnext.js

Shrinking the image within a card row in Laravel/Bootstrap 5

My issue involves creating a row of Bootstrap cards using Laravel. When I add the "row" class, the images in the cards shrink. However, if I remove the "row" class, the images display perfectly. How can I fix this problem? <h1>Vehicles</ ...

phpcsslaravelbootstrap-5

Using AngularJS to send data from a controller to a factory

Looking to implement a basic pagination feature with data from the backend. Each page should display 10 activities. /feed/1 -> displays 0-10 /feed/2 -> displays 10-20 /feed/3 -> displays 20-30 The goal is to start at page 1 and increment the pag ...

javascripthtmlangularjs

Ways to create a vertical bottom-up tree view using d3.js

I am trying to create a reverse tree view, starting from the bottom and moving up. What modifications do I need to make? Here is the link to my JS Fiddle: ...

javascriptjquerycssd3.jssvg

Can you determine the exact spot in a paragraph where a mouse click event takes place?

My webpage has a section with a paragraph containing text. If the user clicks on the paragraph, a textarea is dynamically created with the same text from the paragraph. I am wondering if there's a way to determine the exact location within the paragra ...

javascriptjqueryhtmltextareamouseevent

Is using the img-responsive class in Twitter Bootstrap 3 causing my container-fluid divs to resize?

Seeking some insights on a Bootstrap issue I'm experiencing. I've observed that the "container-fluid" divs with responsive images are slightly smaller than those containing only text. This inconsistency in sizing is affecting the overall look o ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Unable to fetch the data from HTML input field using autocomplete feature of jQuery UI

I am facing an issue with my html autocomplete textbox. Whenever I try to enter an address like "New York" and click on the submit button, it does not retrieve the input value and returns no value. Test.aspx <!--Address--> <div class="form-g ...

c#htmlvisual-studioextract

If the image's height is less than the parent's height, center it vertically. Otherwise, restrict the height to 100

Currently, I am utilizing html5-fullscreen mode along with a full-screen parent div. My goal is to vertically center an image within this parent div, but only if the image is smaller than the parent div (i.e., the screen size). Additionally, I aim to restr ...

jquerycsshtml

What is the best way to eliminate the white space between a background image and a flex footer?

Is my background image causing a gap between it and my flexbox sticky footer? I've tried various methods to fix it, but they only seem to create more issues. Can anyone provide assistance? I have created a placeholder image of the same size as my orig ...

htmlbootstrap-4flexboxbackground-imagesticky-footer

Different placeholder text rendered in two text styles

Can an input box placeholder have two different styles? Here's the design I have in mind: https://i.stack.imgur.com/7OH9A.png ...

javascriptjquerycsshtml

Can you show me how to achieve a smooth background color transition for a div that takes 2 seconds to complete when it is inserted into the DOM?

On my webpage, I have a list of items that are constantly being updated via a WebSocket connection to the backend. Each time a new item is added to the list, I would like it to be displayed with a background color transition lasting only a brief moment. ...

htmlcss

Using CSS3 to clear floats without altering the HTML structure

Despite searching for multiple solutions to this issue, I have yet to find one that works without requiring me to modify my HTML code. Here is the current HTML in question: <div class="name">Daiel</div> <div class="amount">30€</div ...

htmlcss

Issue with Box2Dweb's Rope Joint functionality has been identified

I am facing an issue with the Rope Joint code in Box2dweb. Despite running the code in my browser, I am only seeing a blank canvas with no activity. However, when I remove the lines that define the joints (the eight lines following //joints), the code ru ...

javascripthtmlcanvasbox2d

Incorporating a hyperlink into an HTML submit button

Recently, I started working with MySQL and decided to create a basic registration page. However, upon clicking the submit button, I would like to be redirected to another page, possibly a login page as seen on many websites. I am struggling with figuring ...

phphtml

Display information from Node.js on an HTML page

I am working on a nodejs project where I need to login on one page and display the result on another page using expressjs. Below is my code for login.ejs: <!DOCTYPE html> <html lang="en" dir="ltr"> <body> <form method="PO ...

javascripthtmlnode.jsexpress

What is the best Bootstrap component to implement?

Can anyone provide guidance on utilising Bootstrap to design the upcoming page? I am interested in understanding which components are suitable for this particular scenario. ...

javascriptcsshtmltwitter-bootstrap-3

Guidelines on transforming XML files into HTML tables using C++ programming language

Is there a C++ library available that can help me convert an XML file into an HTML table using my C++ application? For example: <breakfast_menu> <food> <name>Belgian Waffles</name> <price>$5.95</price> <d ...

htmlc++xmlc++11

Issue with Angular JS failing to populate HTML content following an HTTP request

Today was my first day diving into AngularJS, following some tutorials on CodeSchool. I checked out this tutorial and this example to get started. The issue I'm facing is that although I successfully retrieved JSON data from the PHP server side (for ...

javascripthtmljsonangularjs