The responsive navigation menu in React Bulma is malfunctioning and not behaving as anticipated

I'm having trouble with toggling the mobile navigation bar when clicking the button. I am working on a project using Bulma CSS framework with React. Below is the component for the React nav bar:

const Header = (props) => {
  const dispatch = useDispatch()
  const { loginUser, isAuthenticated, history, errors } = props;

  const dropdownRef = useRef(null);
  const [isActive, setIsActive] = useDetectOutsideClick(dropdownRef, false);
  const [isMobileActive, setisMobileActive] = useState(false);
  const onClick = () => setIsActive(!isActive);

  const onLogout = () => {
    dispatch(logout())
  }

  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <a className="navbar-item" href="https://bulma.io">
          <img
            src="https://bulma.io/images/bulma-logo.png"
            width="112"
            height="28"
          />
        </a>

        <a
            onClick={() => {
              setisMobileActive(!isMobileActive)
            }}
            role="button"
            className={`navbar-burger burger ${isActive ? "is-active" : ""}`}
            aria-label="menu"
            aria-expanded="false"
            data-target="navbarBasicExample"
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
      </div>

      <div id="navbarBasicExample" className="navbar-menu">
        <div className="navbar-end">
          <a className="navbar-item">Dashboard</a>

          <div
            onClick={onClick}
            ref={dropdownRef}
            className={`navbar-item has-dropdown ${
              isActive ? "is-active" : ""
            }`}
          >
            <a className="navbar-link">Account</a>

            <div className="navbar-dropdown is-right">
              <a className="navbar-item">Account settings</a>
              <a className="navbar-item">Set Job filters</a>
              <a className="navbar-item">Report an issue</a>

              <a className="navbar-item" onClick={onLogout}>Log out</a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

The part at the bottom with the dropdown menu is for the desktop navigation bar. However, there seems to be an issue with the mobile toggle menu. How can I resolve this problem as nothing happens when I click the toggle button?

Answer №1

While I may not be well-versed in React, when it comes to using Bulma, the key is to toggle the class is-active on both the navbar-burger and the targeted navbar-menu.
For implementation guidance, you can refer to the examples provided in the Bulma navbar documentation. Personally, I find the jQuery implementation to be seamless and effective:

$(document).ready(function() {

  // Check for click events on the navbar burger icon
  $(".navbar-burger").click(function() {

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

  });
});

Alternatively, if you prefer a Vanilla Javascript approach, the documentation also provides an implementation guide.

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 can I alter the position of the scrollbar in a nested div structure in CSS?

Within my nested div structure, I have an inner div that functions as an auto scroller. However, this inner div is contained within another outer div, which itself is positioned inside yet another outer div. The scroller is only visible within the first ...

Sorting tables in React using Material UI design

Currently, the Name column is sorted in ascending order by default. I am trying to figure out how to implement an onclick event that will change the sort order when the column header is clicked. function descendingComparator(a,b, orderBy) { console.log ...

Utilize Redux Toolkit to efficiently share actions across different slices of state

How can I efficiently share common actions across multiple redux state slices? For instance, let's say I have an updateField action that I want to use in various slices other than just the profile slice. Should I import it from an external file for r ...

Tips for modifying the default settings of a CSS framework like Material UI

Exploring the realm of CSS for the first time and feeling a bit lost. I am working with material ui alongside react and redux. My goal is to customize certain properties of a specific component, such as TextField with the disabled attribute. Upon inspectin ...

The Mystery of jQuery Isotope Plugin: Why Can't I Add "display:none" Inline?

I'm currently in the process of integrating Isotope into my latest Wordpress theme. However, I've encountered an issue where it's not appearing on the page due to some external factor adding an inline style (display:none) to the main isotope ...

Generate a React App with TypeScript: Only transpile, skip type checking and linting

Need help optimizing the deployment of my small React project on a Google Compute Engine instance with limited RAM of under 1.5 GB. During the production build, the typescript linter and compiler consistently consume around 2 GB of RAM, which causes the C ...

The occurrence of the page constantly refreshing and altering the query parameters 'state' and 'session' in the URL is a common issue encountered while integrating React with keycloak

I've been experimenting with using React alongside Keycloak. I've set up the realm, users, and client successfully. However, whenever I run npm start to launch my react project, the page keeps refreshing every second and the state changes. For e ...

Experiencing difficulty importing Materialize CSS JS into React

Good day everyone, I've been facing challenges in implementing materialize css into my react-app, specifically with the JavaScript files. After trying various methods, I believe that I have made some progress using the following approach: In my &ap ...

Having trouble adding a test card to the Google Pay testing environment and calculating the order total

How can I display the order total in GooglePay payment sheet? I could not find any documentation on this. Is it possible to do so? Even though I am using the TEST environment, I am unable to add any test card as mentioned in the URL provided below. Additio ...

Different syntax issues in Firefox and Internet Explorer are causing errors

While this code successfully runs on Firefox, it encounters errors when used on IE. document.getElementById('zip_container').style.borderLeft = '1px solid #D9D9D9;'; In this code snippet, zip_container refers to a div element. If any ...

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Recently, I developed a script that generates a series of fields based on a number provided by the user (k). Initially, I had a script that would create the correct number of fields. However, I decided to arrange them like vectors on the screen, so I made ...

How is the height or width of the Bootstrap modal determined?

I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes. I can't seem to understand why some modals appear taller, wider, or have other specific dimensions. For more information, refer to the documentation: ...

The issue of jumpy CSS background on full screen mode for mobile devices is causing

While developing a web app, I encountered an issue with the responsive (parallax) full screen background. On mobile devices, the background does not extend below the toolbar, causing a jumpy effect when scrolling up and down in Firefox. I have tried differ ...

Different methods for adjusting the bot's background hue

Currently, I have my Luis bot integrated into a SharePoint website using the iframe HTML element. I am looking to add some custom styling to it, specifically changing its background color. I found a tutorial that explains I need to clone the source code a ...

Verifying the Presence of a Custom index.js File in Webpack

My directory structure is organized like this: src/ MyComponent1/ index.js index.custom.js MyComponent2/ index.js The index.js and index.custom.js files in the MyComponent1 folder each have different implementations of MyComponent1. I wa ...

Hide the scrollbar in CSS when it is not needed

I need help figuring out how to hide the scroll bar using overflow-y:scroll;. I am working on a website where posts are displayed in a main area, and I want to only show the scroll bar when the content exceeds the current width. My second question is abou ...

Navigating through an array and Directing the Path

My array contains objects as shown below: const studentDetails = [ {id:1, name:"Mike", stream:"Science", status:"active"}, {id:2, name:"Kelly", stream:"Commerce", status:"inactive"}, { ...

Attempting to isolate just a fragment of the inner content

Option Explicit Sub VBAWebscraping2() Dim IEObject As Object Set IEObject = New InternetExplorer IEObject.Visible = True IEObject.navigate url:="https://streeteasy.com/building/" & Cells(2, 4).Value ...

Steps to resolve the 'Unknown keyword' issue while packaging a CSS file using webpack

In the process of upgrading dependencies to the latest versions for my Electron app built in Angular, I have encountered some issues. ✅ Electron remains on v19 ✅ Tailwindcss is updated to v3.1.8 ⬆️ Angular is being upgraded from v11 to v14 ⬆️ ...

Having an issue with my JavaScript burger menu not functioning properly

I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...