1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: SideNav closeOnClick only for mobile devices

matthias_deox pro asked 6 years ago

Hello, I'm using ajax to refresh my pages so I like the closeOnClick option because it tends to be annoying when the page updates and the black screen along with the navbar remains active. However I would like it much more if there was a feature that closes the navbar on click only for smaller devices where the navbar would be hidden anyways. If the closeOnClick option is enabled, the navbar closes even on desktop computers which isn't great.

Dave Fisher pro answered 6 years ago

I tried it on both MDB 4.1 and MDB 4.2 (both Pro). Same behavior on both. Thanks for any help.

Bartłomiej Malanowski staff answered 6 years ago

Hi, Dave! What's your version of MDB?

Dave Fisher pro answered 6 years ago

It would help a lot if this fix responded to window.resize events instead of just running once. ---- more details ---- We had the same issue so we used the fix suggested if (options.closeOnClick === true && window.innerWidth < 1440) but the issue now is that when the window resizes the issue is kinda worse. :) The code above must run only once since if you resize the window you don't get a change in behavior. The CSS rules change on a window.resize, but the fix above doesn't. Indeed a page refresh fixes the issue, but when using Angular there are rarely full page reloads. It works out to confuse users since they obviously don't do a page refresh after they resize the window. Is there a way to respond to the window.resize event and get this improved behavior? Thanks! - Dave

Michal Szymanski staff answered 6 years ago

Hi, open mdb.js and in the line 8968 add one more condition. if (options.closeOnClick === true) replace with: if (options.closeOnClick === true && window.innerWidth < 1540) //Set your width here
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
matthias_deox
Pro User 14Support score
9Questions 5Answers 0Snippets