The Bootstrap 5 navigation bar remains fully expanded and does not collapse as intended

I'm having trouble getting the navbar to collapse on my landing page created using react and bootstrap. Here is the code for my header component:

import React from 'react';
import logo from '../images/logonoBG.png';

export default function Header() {
  return (
    <header className="header">
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <img className="navbar-brand logo" src={logo} alt="#" />
          <button 
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="#gallery">Gallery</a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
  )
}

Answer №1

To make adjustments to your header, you should remove the "navbar-toggler" class from the button and eliminate the "navbar-collapse" class from navbarSupportedContent. Everything else in the code can remain unchanged:

import React from 'react';

export default function Header() {
    return (
      <header className="header">
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container-fluid">
            <div className="navbar-brand logo"  alt="#">LOGO</div>
    
            <button 
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="#gallery">Gallery</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#contact">Contact</a>
                </li>
              </ul>
            </div>
          </div>

        </nav>
      </header>
    )
  }

However, you may notice a strange behavior where the navbar appears to have space-between property for justify-content. This results in the button being pushed to the center of the navbar when navbarSupportedContent is revealed. To correct this, simply place the button and navbarSupportedContent within the same div.

The following revised code should resolve the issue, but you may need to make further adjustments based on your desired styling:

export default function Header() {
    return (
      <header className="header">
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container-fluid">
            <div className="navbar-brand logo"  alt="#">LOGO</div>
            <div>
            <button 
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="#gallery">Gallery</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#contact">Contact</a>
                </li>
              </ul>
            </div>
          </div>
          </div>
        </nav>
      </header>
    )
  }

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

Is there a way to properly access and interpret a .log extension file within a React component?

import React from "react"; import "./App.css"; function FileReaderComponent() { const readLogFile = () => { if (window.File && window.FileReader && window.FileList && window.Blob) { const preview = document.getElementByI ...

Problems with IE8 - Rendering correctly on all other browsers

I'm having some trouble with my website's display in IE8. It looks great in IE9, Firefox, and Chrome, but in IE8 it appears all jacked up. I'm using WordPress with Thesis Themes and editing custom.css for my changes. You can view my site he ...

Utilizing Next 13 for flexible MDX imports

Recently completed the Next13 + MDX Tutorial, however, I am still unclear on how to dynamically load my mdx files. My mdx files are not hosted on a remote server, so I do not require next-mdx-remote. Nonetheless, I am in need of a method to load different ...

Troubleshooting the inability to set percentage values in Bootstrap styling

My goal is to create a bar with thin bars, but my use of Bootstrap limits my control over sizes. <template> <div class="container-fluid mx-auto"> <div class="row"> <div class="square rounded-pill&qu ...

Managing async setState with React Hooks: Best practices for handling uploadProgress in axios within components

Our goal is to upload multiple files simultaneously while also displaying the progress of each upload. In our initial attempt, we tried using setState and the previous state in the uploadProgress callback: const FileUpload = () => { const [pendingUp ...

New to React: Arrow Function Example that Might Puzzle You

As a beginner in React/ES6, I came across this code snippet for handling a checkbox within a custom component that contains a material-ui CheckBox. My goal is to expand the custom component by adding more fields, such as a textbox where users can provide a ...

Hover over the text to reveal its content

I am currently in the process of developing a website that features interactive images with text appearing when hovered over. This concept is inspired by the functionality on the nowthisnews.com site. Despite my efforts, I have been unable to get this fea ...

What could be causing my JavaScript code to not function properly in an HTML document?

Hello, I am a beginner in the world of coding and currently delving into web development. Recently, I was following a tutorial on creating a hamburger menu but I seem to be encountering some issues with the JavaScript code. I have double-checked my Visual ...

Ways to streamline repetitive CSS rules within media queries

As I work on defining multiple media queries, I realize there is some redundant code within them: @media only screen and (max-width:768px), only screen and (min-width:769px) and (max-width:1040px) { .list__figure { margin-right: 20px; ...

Troubleshooting: React promise not functioning in functional component due to issues with UseEffect and UseState

I'm facing a challenge in fetching data and updating the state in a functional component using useEffect and useState. The issue arises when I try to separate the data fetching logic, which is done with axios async/await, into a different file for be ...

Finding strikeout text within <s> or <del> tags can be identified by closely examining the HTML codes

The issue arises with the text that reads as follows: 316.6.1 Structures. Structures shall not be constructed This is represented in HTML as: <b> <s> <span style='font-size:10.0pt'>316.6.1 Structures</span> ...

Modifying text size using JavaScript string manipulation

I'm currently experimenting with a countdown script, but I'm struggling to change the size of the numbers displayed. Can anyone help me find where I can adjust the font and font size in this script? var eventdate = new Date("February 20, 2014 11 ...

Tips for customizing the appearance of selected options in react-select?

Currently, the selected options in react-select are displayed like this https://i.stack.imgur.com/DseJM.png However, if 10 out of the 20 options are selected, this block expands. Rather than displaying each selected option, it would be more beneficial to ...

Animation loading on React.js when the page or URL is changed

Just starting out with React and trying to incorporate a loading animation when the page/url changes on button click - check it out here: https://codesandbox.io/s/cthululel-7zmsl?fontsize=14 Successfully got the animation working on initial load, but runn ...

Is it possible to apply the box-shadow effect only to the left and right sides of a div?

Looking to achieve a box shadow effect on just the left and right sides of a div? box-shadow: 0px 0 20px rgba(0,0,0,.4); I experimented with variations like: box-shadow: 0, foo, 0, foo; but it did not yield the desired results. In the illustration bel ...

Ways to maintain image size while zooming out a webpage with CSS

Is there a way to maintain image dimensions when zooming out a page using CSS? Take, for example, fiverr.com. When the page is zoomed out by 25%, And then, when the page is zoomed back to 100% (normal), How can I fix the image dimensions in this situat ...

Is the component experiencing issues with its style functionality?

I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly. .ts export class AppComponent { title = "Default Title" data = 'This is defaul ...

Guide on exporting several different 3D scenes using GLTFExporter in react-three-fiber

Currently, I am experimenting with creating multiple 3D models of cubes with varying textures on the faces using react-three-fiber. My goal is to export these models as gltf files. I have been referencing this useful resource on Stack Overflow for guidanc ...

What could be causing the CSS border to not show up on the webpage?

I am trying to add a border to the footer, but it seems like something is blocking it from showing properly. Below are the CSS lines I have used: position: fixed; bottom: 0; right: 0; left: 0; clear: both; line-height: 1.36em; padding: 08px 0px 0px; tex ...

What's the best way to position an ion-label at the top of the stack

I'm having trouble creating an input label similar to the new Google style. However, when the label moves up, it gets cut in the middle as shown here. Despite trying to adjust the margin, padding, and Z-index, none of these solutions have resolved my ...