I am new to react. Im trying to make a navigation in my header. i use bulma css :

"bulma": "^0.7.4",

And i import bulma file like this:

import 'bulma/css/bulma.css';

It is working for the most of the css but not with burger menu, the menu is not collapsed when i click on the burger button

Here is my header code:

import React,{Component} from 'react'
import {NavLink} from 'react-router-dom';
import style from './style.css';

class Header extends Component{

    render(){
        return (
            <React.Fragment>
                <nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
                    <div className="navbar-brand">
                        <a href="/" className="navbar-item" to="/">
                        <img src="" alt="" width={112} height={28}/>
                        </a>

                        <a role="button" className="navbar-burger burger " aria-label="menu" aria-expanded="false" data-target="mainNavbar">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        </a>
                    </div>

                    <div  id="mainNavbar" className="navbar-menu">

                        <div className="navbar-start">
                            <NavLink exact activeClassName={style.active} to="/"  className="navbar-item">
                                Home
                            </NavLink>

                            <NavLink activeClassName={style.active} to="/films"  className="navbar-item">
                                Films
                            </NavLink>
                        </div>

                    </div>
                    </nav>  
            </React.Fragment>
        );
    }
}


export default Header;

The

data-target

attribute on the burger button is not triggering the menu. Pleas let me know what im doing wrong. Thanks

1 Answers

0
user2758367 On

When you click on a burger, 'navbar-menu' should be 'navbar-menu is-active'. In the opposite case, you should also remove 'is-active'.