Responsive navigation menu with React and Bootstrap - hamburger isn't working

Asked
Active3 hr before
Viewed126 times

9 Answers

workinghamburgerresponsivenavigationreact
90%

I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with,Again, everything looks fine except that the hamburger icon is not functioning., Thanks mate, it's working Just added the "script src..." to the body of index.html in the public folder – sir-haver Dec 10 '18 at 17:27

Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:

state = {
   showCollapsedMenu: false
}
load more v
88%

A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more,A responsive navigation header, including support for branding, navigation, and more. Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.,A simple flexible branding component. Images are supported but will likely require custom styling to work well.

<Navbar bg="light" expand="lg">
   <Container>
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
               <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
               <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
               <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
               <NavDropdown.Divider />
               <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
            </NavDropdown>
         </Nav>
      </Navbar.Collapse>
   </Container>
</Navbar>
load more v
72%

Search Answer Titles

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Navigation Compositions Breadcrumbs Footer Hamburger Menu Mega Menu Navs Navbar ScrollSpy SideNav ,By clicking on this control, you activate some information or navigation that is hidden by default for UX purposes.,Copy the code above ("hamburger menu icon animations") if you want to have them within an accordion.

<!--Navbar-->
<nav class="navbar navbar-light light-blue lighten-4">

   <!-- Navbar brand -->
   <a class="navbar-brand" href="#">Navbar</a>

   <!-- Collapse button -->
   <button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i class="fas fa-bars fa-1x"></i></span></button>

   <!-- Collapsible content -->
   <div class="collapse navbar-collapse" id="navbarSupportedContent1">

      <!-- Links -->
      <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
         </li>
      </ul>
      <!-- Links -->

   </div>
   <!-- Collapsible content -->

</nav>
<!--/.Navbar-->
load more v
75%

You can just do ‘yarn add styled-components’ or ‘npm add styled-components’,Next step is to pass open prop down to our styled component so we could apply the transition. Open Menu.styled.js and add the following to our transform property: , Vikram Permalink to comment# September 19, 2019 You can just do ‘yarn add styled-components’ or ‘npm add styled-components’

Hi, Maks, There is one guide part is missing in the article.
component > index.js,

export {
   default as Burger
}
from './Burger';
export {
   default as Menu
}
from './Menu';

And this part, transform value should not include quote

// Menu.styled.js
transform: 'translateX(-100%)';
load more v
40%

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.,.navbar-nav for a full-height and lightweight navigation (including support for dropdowns).,Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
   </button>

   <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
         <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
         </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
         <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
   </div>
</nav>
load more v
22%

The example on http://react-bootstrap.github.io/components.html#navbars doesn't work as expected on a small screen (e.g. iPhone at either 320 or 640px width), specifically, the toggle button doesn't appear and the menu is always expanded.,Looking at the source in https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.jsx, I see there is a toggleButton property, but I can't figure out how to make that work, could someone please provide an example?,I see the scroll error in #154 too, but that wasn't what I was referring to:

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Pretag
 Pretag team - issue, fix, solve, resolve
48%

This feature makes your menu look good on any devices, you'll see a hamburger icon on your mobile device and a full-width list on desktops.,If you need these features, you can find them in the menu properties. They make your bootstrap mobile menu look modern and awesome, so check them out.,Bamboo allows both css hamburger menu clicks and left or right swipes on touch screen devices to operate the menu.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "working-hamburger" queries related to "Responsive navigation menu with React and Bootstrap - hamburger isn't working"