Topic: Double navigation navbar collapse issue
Hi,
I'm implementing double navigation (fixed navbar & fixed sidenav). I tested code in mdbootstrap vue documentation and example in mdbvue package src/docs/pro/DoubleNavigationPage.vue and i found the same issue in both.
When the navigation bar collapse, it hides the bars to expand sidenav. This causes that, to expand sidenav, it is necessary to expand navbar. How can I fix this?
P.D.: I have tried with the navbar's expand = "sm" prop, but it isn't a good solution. It also keeps the issue in small screen sizes.
Thank you in advance
Hi,
The reason why it's happening is because the button expanding sidebar is nested in the main navbar toggler component. If you wish to prevent this kind of behavior and have them both controlled separately you could either move the bars icon out of the navbar toggler component still having it placed between tags or move it out of the component completely and control the sidebar from the different part of the page - depending on your needs. Below you can find the first solution.
<!--Navbar-->
<mdb-navbar position="top" dark color="primary" scrolling>
<mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav right>
<mdb-nav-item href="#!" waves-fixed>Home</mdb-nav-item>
<mdb-nav-item href="#!" waves-fixed>CSS</mdb-nav-item>
<mdb-nav-item href="#!" waves-fixed>Components</mdb-nav-item>
<mdb-nav-item href="#!" waves-fixed>Advanced</mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-icon icon="bars" size="2x" @click.native="handleBtnAClick"/>
</mdb-navbar-nav>
</mdb-navbar>
<!--/.Navbar-->
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.1.1
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes