Trouble with visibility of Bootstrap navbar collapse button

While creating an application using bootstrap, I encountered a problem with the navigation bar. The issue is that when I resize the page, the links disappear and the toggle button fails to show up.

Below is my current navigation bar code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <div class="navbar-brand">title</div>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
      </ul>
  </div>
</nav>

If anyone could offer assistance on how to resolve this issue, it would be greatly appreciated.

htmlcsstwitter-bootstrap

Answer №1

Your code is missing the toggle button. Insert the following code snippet before your collapse section and after your 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>

http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<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="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</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>

Answer №2

It seems like you forgot to include a toggle button in your code:

 <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-brand">title</div>
 </div>

For more detailed information, please check out the Navbar documentation (bootstrap)

Answer №3

After switching to Bootstrap 5, I realized that the classes I was using were from an older version. Making the following adjustments in my code helped me solve the issue, referencing the BS5 W3Schools:

<nav class="navbar navbar-expand-sm bg-dark">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Recipe Book</a>
        <ul class="nav navbar-nav">
            <li class="nav-item" routerLinkActive="active">
                <a class="nav-link" routerLink="/recipes">Recipes</a>
            </li>
            <li class="nav-item" routerLinkActive="active">
                <a class="nav-link" routerLink="/shopping-list">Shopping List</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="nav-item dropdown" appDropdown>
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Manage<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Save Data</a></li>
                    <li><a class="dropdown-item" href="#">Fetch Data</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

For more information, check out this resource.

Answer №4

It dawned on me that the mistake I made was opting for bootstrap 3 instead of bootstrap 5, which I mistakenly installed initially.

No matter what I tried, the div with the collapse class just wouldn't appear.

After switching back to bootstrap 3, everything fell into place and worked flawlessly!

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

How come when you add ({}+{}) it equals to "[object Object][object Object]"?

I ran the following code: {}+{} = NaN; ({}+{}) = "[object Object][object Object]"; What is the reason behind the difference in result when adding ()? ...

javascripthtmlnode.js

Instructions for creating a scrollable unordered list when it reaches its maximum capacity

My HTML code has a <ul> element with the following structure: <ul id="messages"> </ul> In my HTML file, I have not specified any <li> items. However, in my JavaScript code using jQuery, I dynamically add <li> items to the & ...

javascriptjquerycss

Unselecting a span in AngularJS: Switching selection to another span

Whenever I click on an item from my list displayed using ngrepeat, it generates another list specific to the selected element. My goal is to change the background color of the clicked element to indicate it has been selected. However, the problem arises wh ...

javascripthtmlcssangularjs

Automated system is responsible for flagging and disabling comments

We are facing a puzzling issue at the moment. Our comments form allows users to submit their thoughts on news articles, and each submission is immediately accepted and displayed on the same page. Within each comment, there is a link that enables users to ...

javascripthtml

What is the best way to align elements in a div or navigation section?

Behold, my masterpiece navigation bar: #main-nav-bar .nav-item { display: inline-block; padding: 0.5%; border-right: 1px solid white; } #main-nav-bar a { text-decoration: none; color: #CFCFE0; } <nav id="main-nav-bar"> <a href="#Ser ...

htmlcss

What is the best way to manage a session using JavaScript?

Currently developing a website that initially hides all elements except for the password box upon loading. Once the user enters the correct password, all webpage elements are revealed. Seeking a solution to keep the elements visible on reload by utilizing ...

javascriptphphtmlcookiessession-cookies

Improving Material UI Responsiveness: A Comprehensive Guide

Could someone please help me resolve the overflow issue in my UI? You can view the overflow here. The second image explains the reason behind it, which you can see here. I am currently working on fixing my UI using React and Material UI. When checking the ...

cssmaterial-ui

Issues with select options not functioning correctly in knockout framework

Currently, I am engaged in a project where data is being retrieved from an API. The main task at hand is to create a dropdown list using select binding. In order to do so, I have defined an observable object to hold the selected value within my data model. ...

javascriptjqueryhtmljsonknockout.js

Enhancing x-axis presentation in D3.js-generated charts

I created a bar chart using D3.js, but I have encountered an issue with one of the values on the x-axis being too long. I attempted to use CSS properties like text-overflow: ellipsis, width: 10px, and overflow: hidden to abbreviate values that exceed a cer ...

javascriptcssd3.js

Elements within the DIV tag are not displaying in a linear arrangement as intended

I'm having trouble creating a navbar with Bootstrap 4. The items in my div tag are not inline, and I can't align my nav item to the right. Here is the HTML code: <nav class="navbar navbar-inverse "> <div style="display:inline"> ...

htmlcsstwitter-bootstrapbootstrap-4

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

javascripthtmlcssonsen-ui

The function $.ajax may not be available, but rest assured that the jquery library is functioning properly

Upon checking the console, I noticed the following: Here is the AJAX code snippet in use: $("#accept").click(function(){ id = $("#idInput").val(); password = $("#passwordInput").val(); alert(id) alert(password) $.aja ...

jqueryhtmlajax

Why do identical elements show different scrollHeights when overflowed and how can this discrepancy be resolved?

I am using a plugin that generates a <p> element and continuously fills it with the content from a <textarea>. This plugin positions the <p> directly below the <textarea>, and styles them so that they appear identical in terms of th ...

javascriptjqueryhtml

Issue with Internet Explorer's CSS

It appears that this page is not displaying correctly in Internet Explorer 9, along with possibly older versions as well. The issue seems to be with the right menu floating to the bottom of the page. Firefox, Chrome, and Safari are all rendering it correct ...

htmlcssinternet-explorer

Tips for enabling selection of list items in an input tag

Below is the code I have written to create an InputFilter. MyFilter = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable = '<input type="text" id="myInput" on ...

javascripthtmlcss

Leveraging Modernizr for identifying drag and drop functionalities

On my website, there is a section that requires drag and drop functionality in HTML5. I want to inform users on the homepage if their browser supports this feature. Despite attempting to use Modernizr, I have not been successful. I generated a custom file ...

html

Creating dynamic and fluid motion with Bezier curves on canvas

I am currently working on creating a line that spans across the canvas from left to right. In these early stages of development, I am using a step-by-step animation approach with the following function: timer = window.setInterval(draw_line, 30); Here is ...

javascriptjqueryhtmlcanvas

What is the best way to incorporate both images and text in PHP code?

I'm currently working on creating a large image call-to-action (CTA) for my new WordPress website. I've set up a new field group with the type "group" in ACF, and added some functions in PHPStorm. However, none of my images, text, or links are ap ...

javascriptphpcsswordpressadvanced-custom-fields

Is there a way to adjust the height of an image to be responsive in tailwind css?

<!-- this is the section with the services description and an image of an egg --> <!-- this is the first section with the description --> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> &l ...

htmlcsstailwind-css

Dealing with unreadable strings when formatting dates in a JSP

When working on a JSP project, I encountered a situation where I needed to format a Java Date retrieved from the request. My current approach looks like this: <fmt:formatDate value="${attribute.value}" pattern="yyyy-MM-dd HH:mm:ss"/> This method wo ...

javahtmljspjstl