Topic: sidenav hamburger requires double click after the first time showing the sidebar
Ian G. Morris asked 6 years ago
Expected behavior Each Time I click on the sidenav hamburger, it should show or hide the navigation menu
Actual behavior The first time you click on the the navigation hamburger it does respond correctly by showing the sidenav, each time after it requires two clicks for the menu to appear.
I have copied the example code directly from https://mdbootstrap.com/docs/jquery/navigation/compositions/, specifically the section labelled Double Navigation with a hidden SideNav & fixed Navbar. The code has not been altered in anyway, and does not include any additional libraries.
Resources (screenshots, code snippets etc.) https://help.deacom.com/sandbox/TOPHAT_Backup/newBuild/
MDBootstrap staff pro premium priority answered 6 years ago
Hi Ian G. Morris,
We can guarantee that proper implementation of our double navigation with top navbar and side-nav works properly because you can test it in this very website. I can not test your example because you didn't post your code. In this example live preview you can see that it works properly: https://mdbootstrap.com/snippets/jquery/mdbootstrap/105292?action=full_screen_mode
I can show you our snippet with basic implementation of this components: https://mdbootstrap.com/snippets/jquery/ascensus/46
Full tutorial of how to use our components: https://mdbootstrap.com/education/bootstrap/
If you need additional help I am here for you.
Best Regards, Piotr
Ian G. Morris commented 5 years ago
Piotr,
I have followed both the example snippet you provided as well as reviewed the tutorial and additional information. I have updated my code copying EXACTLY what is shown in the snippet you provided above and I am still getting the same result.
https://help.deacom.com/sandbox/tophat_backup/mdbootTicket/
Please take a look at this code as nothing has changed from your provided examples yet I still have to do the double click.
karolla86 answered 5 years ago
He said true.
Just put your navbar into container. When I click Menu icon, it opens sidenav. It is ok. But when click it one more time, it open sidenav again. İt doesnt close. Fix it pls. And these codes doesnt work:
/
/ Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');
for example : the navbar in container:
MDBootstrap staff pro premium priority answered 5 years ago
Hi karolla86,
In examples shown above this is not possible to click the menu icon while sidenav is open because it is under sidenav. Are you sure you did everything according to our navigation docs? Your photo didn't load correctly. Can you show me the example you are talking about in our snippet environment?
I am here to help you.
Beste Regards, Piotr
MDBootstrap staff pro premium priority answered 5 years ago
Hi Karolla86,
Adding overlay problem on hamburger click is fixed and will be added in the next release. To change behaviour of button click we would have to add new feature to our side nav. Right now I don't have a quickfix for you. For now, you can use option:
// SideNav Button Initialization
$(".button-collapse").sideNav({
closeOnClick: true
});
It will close sidenav on clicking the item in the sidenav list. We will edit this attribute to close sidenav on hamburger click too but can not promise it will be ready in next release.
You can always make button disappear when sidenav is visible and show it again when sidenav is hidden.
Best Regards, Piotr
karolla86 commented 5 years ago
This code doesnt work. I will wait your next update.
MDBootstrap staff pro premium priority commented 5 years ago
This code does exactly what you can read above. We do not support by default clicking on the same icon to toggle sidenav. This is a completely different functionality to the one we intended to make. You can create another close button by adding this line in sidenav initialization that will close the sidenav on click:showCloseButton: true
Ian G. Morris commented 5 years ago
Piotr, I waited for the next release, however the problem still exists. In fact I see it happening now on one of your Premium demo pages: https://mdbootstrap.com/previews/templates/admin-dashboard/html/dashboards/v-1.html
Ian G. Morris answered 5 years ago
Piotr,
I have followed both the example snippet you provided as well as reviewed the tutorial and additional information. I have updated my code copying EXACTLY what is shown in the snippet you provided above and I am still getting the same result.
https://help.deacom.com/sandbox/tophat_backup/mdbootTicket/
Please take a look at this code as nothing has changed from your provided examples yet I still have to do the double click.
Ian G. Morris answered 5 years ago
Piotr, I waited for the next release, however the problem still exists. In fact I see it happening now on one of your Premium demo pages: https://mdbootstrap.com/previews/templates/admin-dashboard/html/dashboards/v-1.html
MDBootstrap staff pro premium priority answered 5 years ago
Hi Ian,
Your HTML has a major issue. You place everything inside tags. You need to properly structurize your HTML page. Please take our HTML tutorial to understand this problem. This is the very basics of web development.
If you need additional help I am here for you.
Best Regards, Piotr
Ian G. Morris commented 5 years ago
Piotr,
The code displayed in the example I provided is from mdbootstrap.com (look at the URL), this is not my code, its yours.
FYI
Ian
MDBootstrap staff pro premium priority commented 5 years ago
You still don't understand. I checked your site structure and your main element in the site is where it should be . Code is ours but if you have wrong basic HTML structure it is not our fault you can not use it.
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 jQuery
- MDB Version: 4.8.5
- Device: Windows PC
- Browser: Chrome 75.0.3770.100
- OS: Windows 10 Pro
- Provided sample code: No
- Provided link: Yes