Troubleshooting: Unable to Display Collapsing Navbar in Bootstrap 5 When Toggler is Pressed

My attempt at creating a collapsing navbar isn't working as expected, and I'm struggling to identify the issue.

I have set up a collapse toggler that should target #navbar1. However, when I shrink the page, the Navbar collapses, the .navbar-toggler-icon appears but does not reappear when clicking the toggler. Upon inspecting the CSS, I noticed a selector .collapse:not(.show) that applies display:none; But even after adding the class .show, it remains visible and doesn't hide upon toggling.

Any help would be greatly appreciated :)

Edit: I have included bootstrap.min.js

<nav class="navbar navbar-light navbar-expand-lg fixed-top">
   <div class="container-lg">
     <ul class="navbar-brand navbar-nav nav ml-auto">
        <li class="nav-item">
           <a class="nav-link" href="#">Teamserver.at</a>
        </li>
      </ul>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar1">
         <ul class="navbar-nav nav ml-auto navbar-right">
            <li class="nav-item">
               <a class="nav-link" href="#">XMPP/Jabber</a>
            </li>
            <li class="nav-item ">
               <a class="nav-link active" href="#">Über Teamserver</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Webinterface</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Einstellungen</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Software</a>
            </li>
         </ul>
      </div>
      <div class="navbar-right">
        <ul class="navbar-nav nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"><button class="btn btn-light">Sign in</button></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><button class="btn btn-primary">Sign up</button></a>
          </li>
      </div>
   </div>
</nav>

Answer №1

To create two separate menus, one for navigation links and another for signing in or signing up, you can create two

<div class="collapse navbar-collapse navbar-menu" id="navbar1">
elements with unique IDs and a common class. The toggle button's data-bs-target attribute should be set to the class, .navbar-menu, and the aria-controls attribute should have the values of the two IDs, navbar1 and navbar2.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a544a55">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c0dbc5dbc4">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-light navbar-expand-lg fixed-top">
<div class="container-lg">
    <ul class="navbar-brand navbar-nav nav ml-auto">
        <li class="nav-item">
        <a class="nav-link" href="#">Teamserver.at</a>
        </li>
    </ul>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-menu" aria-controls="navbar1 navbar2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse navbar-menu" id="navbar1">
        <ul class="navbar-nav nav ml-auto navbar-right">
            <li class="nav-item">
            <a class="nav-link" href="#">XMPP/Jabber</a>
            </li>
            <li class="nav-item ">
            <a class="nav-link active" href="#">Über Teamserver</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Webinterface</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Einstellungen</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Software</a>
            </li>
        </ul>
    </div>
    <div class="collapse navbar-collapse navbar-menu ml-auto" id="navbar2">
        <ul class="navbar-nav nav">
        <li class="nav-item">
            <a class="nav-link" href="#"><button class="btn btn-light">Sign in</button></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><button class="btn btn-primary">Sign up</button></a>
        </li>
    </div>
</div>
</nav>

The second navbar had a class called navbar-right, which is not a standard Bootstrap class.

Update

Here is an updated version that includes keeping the sign-in and sign-up buttons in the navbar at all times.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c524c53">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e7373686f686e7d6c5c29322c322d">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-light navbar-expand-lg fixed-top">
    <div class="container-lg">
        <ul class="navbar-brand navbar-nav nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Teamserver.at</a>
            </li>
        </ul>

        <div class="collapse navbar-collapse order-1 order-lg-0" id="navbar1">
            <ul class="navbar-nav nav ml-auto navbar-right">
                <li class="nav-item">
                    <a class="nav-link" href="#">XMPP/Jabber</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link active" href="#">Über Teamserver</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Webinterface</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Einstellungen</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Software</a>
                </li>
            </ul>
        </div>

        <div class="navbar-right d-flex flex-nowrap">
            <a href="#" class="btn btn-outline-primary me-3">Sign in</a>
            <a href="#" class="btn btn-primary me-3">Sign up</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </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

Trouble with implementing a stationary header for a table on IE9?

I have successfully created a table with a fixed header and scrollable content. I utilized CSS classes "fixedHeader" for thead and "scrollContent" for tbody: thead.fixedHeader tr { position: relative; } html > body thead.fixedHeader tr { displa ...

I am looking to create a feature for my table that adjusts its color scheme based on whether the number is odd or even

My current code is designed to change the background color of td elements for odd and even rows. However, when a new high score is entered, a new td is added but it does not get colored automatically as intended. I am facing an issue where the code is not ...

Ways to change the CSS styles of components within App

When my app is in full screen mode, I need to increase the font size for certain components. Within my App.jsx file, I have a variable that adds the "fullscreen" class to the root DIV of the app when triggered. Instead of using a blanket approach like * ...

Implementing CSS styles based on the count of elements

Within my react js project There is a particular block that may contain either one or two elements, depending on the runtime conditions. For instance: Scenario 1: (two groups are present) <div class='menu-list'> <div class='g ...

CSS menu LI with horizontal spacing

I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space? Here is the HTML code snippe ...

Setting the root position of a div: How can it be done?

Imagine a scenario where a div element is designed to follow the mouse cursor on the screen. This functionality is achieved by manipulating the document's `mousemove` event and adjusting the div's `left` and `top` positions based on the event dat ...

Safari is displaying the HTML5 range element improperly

My HTML input type=range element is styled perfectly in Chrome, but it's a disaster in Safari. The track ball disappears or only partially renders when moved, and it seems to take forever to load. Any idea what could be causing this strange behavior? ...

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

After reviewing various posts, it seems like the only solution involves using javascript. Is there a way to hover over one element without affecting the style of another element below it, all without relying on javascript? I'm looking for a solution u ...

Incorporate dynamic YouTube videos into a flexible grid layout

I am struggling to make Youtube videos responsive within a grid layout. No matter what I try, the videos appear very small on larger screens and the size remains the same. My goal is to have two videos side by side on larger screens, and stacked on top of ...

Override the default Bootstrap 5 styling for nav-links

I recently encountered a problem while trying to customize the appearance of the nav-link elements in my Bootstrap 5 navbar. I initially thought I could simply override the existing styles by targeting the class in my CSS. However, my attempts were unsucce ...

What is React.js's approach to managing CSS files?

Currently, I am enrolled in Bootcamp at Scrimba where they utilize an online platform for teaching various courses. One of the topics covered is React and involves working with CSS files. When working on my local machine, I typically use the index.css file ...

Diagonal-left ending div in cascading style sheets

Looking to achieve a div with a diagonal side similar to the image in the link below: https://i.sstatic.net/u9grW.png I'm trying to figure out the best way to do this. One idea is to position 2 divs closely together and rotate one of them. Alternativ ...

JavaScript button mouse enter

There seems to be an issue with this code. The button is not functioning properly after hovering over it, even though it was copied from the instructional website where it works fine. <html> <head> <title>Button Magic</t ...

Using a new hue for a hyperlink

I currently have the following CSS styling for my links: DIV#tt { background: #fff; color: #333; margin: 0 0 15px; position: relative; padding: 1px; } DIV#tt A, DIV#tt SPAN.link { color: #990000; } These styles work well and chang ...

Styling an input text using CSS and Jquery without relying on a parent

Styling CSS input text without a parent div Hello everyone, I am looking to remove the <div id="input_container"> from the code below. Is it possible to achieve the same result without that surrounding div? Check out the jsfiddle: http://jsfiddle.n ...

How can I resolve the issue with the HTML/CSS footer not functioning properly on Safari for iPhone in my mobile site?

Struggling with a mobile website issue here. The client wants text-based buttons/links at the bottom, so I added them in, but my skills with size percentages are a bit rusty. I need these buttons to line up horizontally and adjust their width accordingly ...

Adjust the size of the iframe image to fit seamlessly within the design

Is there a way to adjust the size of the image on the right without altering the layout design? The current GIF is 500x500px, but it is only displaying as 100x100px. Any assistance would be greatly appreciated! To see what I currently have (Demo with code ...

Tips for utilizing a personalized extension in Visual Studio Code

Embarking on my HTML journey, so please bear with me. I've been watching tutorial videos to get a better grasp of it, and one of the tutorials I'm following shows how to create a resume on GitHub using VS Code. Check out the video here At 3:44 ...

CSS or jQuery: Which is Better for Hiding/Showing a Div Within Another Div?

Show only class-A at the top of the page while hiding all other classes (x,x,c). Hide only class-A while showing all other classes (x,x,c). Is it possible to achieve this? <div class="x"> <div class="y"> <div class="z"&g ...

Position text on the background image without using positioning techniques

I need to center my text precisely on top of my background image without resorting to the use of relative or absolute positioning. Many solutions online rely on using absolute positioning for the text along with a specified top value, but I prefer not to e ...