Topic: sidenav hamburger requires double click after the first time showing the sidebar

Ian G. Morris free asked 4 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 answered 4 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 free commented 4 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 commented 4 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.


Ian G. Morris free answered 4 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 free answered 4 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.


MDBootstrap staff answered 4 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 free commented 4 years ago

This code doesnt work. I will wait your next update.


MDBootstrap staff commented 4 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 free commented 4 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 answered 4 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


karolla86 free commented 4 years ago

I customized it. My hamburger menu is in container.

https://www.kisa.link/M0xF


karolla86 free answered 4 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:

enter image description here


MDBootstrap staff answered 4 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 free commented 4 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: 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