sriramk18 priority asked 11 months ago


Expected behavior https://mdbootstrap.com/docs/b4/jquery/navigation/compositions/

Double Navigation with slim SideNav and fixed Navbar

The image shows slim side bar, but the code is for regular side bar.

Actual behavior https://mdbootstrap.com/snippets/jquery/marta-szymanska/514898?action=fullscreen

The side bar displays in full size not as slim.

Please share the code for double navigation with slim sidenav and fixed navbar.

Resources (screenshots, code snippets etc.)


Dawid Wajszczuk staff commented 11 months ago

But do you want this for MDB4 jQuery or MDB5 Standard? And do you mean something like this https://mdbootstrap.com/snippets/standard/d-wajszczuk/3675617?


sriramk18 priority commented 11 months ago

Hi,

I need side nav similar to the one in the below site.

https://adminlte.io/themes/v3/

Is it possible with mdb?


Dawid Wajszczuk staff commented 11 months ago

Yes, it is possible. It is similar to our dark sidenav https://mdbootstrap.com/docs/standard/navigation/sidenav/#section-sidenav-dark but with more elements like badges, search and some custom CSS. I still don't know which technology (MDB4 or MDB5) you are trying to use.


sriramk18 priority commented 11 months ago

MDB5. Help me with side navigation.

I need slim side nav when i am accessing the website from larger screen.

I need the normal side nav (mode:over) when i am accessing the website from mobile screen. (How to change the slim side nav to normal side nav using js)

Both these function should happen when i click on the toggle button based on the windows resize.


Dawid Wajszczuk staff commented 11 months ago

You can try something like this https://mdbootstrap.com/snippets/standard/d-wajszczuk/3692002#js-tab-view.


sriramk18 priority commented 11 months ago

Actually, the link above is fine for mobile. But for desktop screen, i need the slim nav bar. But the same application should switch to the view as in the previous link.

https://adminlte.io/themes/v3/

The above website has slim nav bar for desktop screen, but the side nav changes to over when using it in the mobile screen.

Please provide a solution to use slim side nav in bigger screen and normal side nav in smaller screen in the same button click and windows resize events.


Dawid Wajszczuk staff commented 11 months ago

This should do the work https://mdbootstrap.com/snippets/standard/d-wajszczuk/3692002.


sriramk18 priority commented 11 months ago

Thanks for you help.


sriramk18 priority commented 11 months ago

When i change the width to 900 px, the screen does not function as it function with 1400 px. The slim nav bar get fixed when i use the 900 px.

https://mdbootstrap.com/snippets/standard/d-wajszczuk/3692002


Dawid Wajszczuk staff commented 11 months ago

What exactly is your issue with this example?


sriramk18 priority commented 11 months ago

When i replace the width from 1400 px to 900 px, the side nav is not working with screen resolution with width between 1400 px to 900 px.

Please change 1400 in Javascript to 900. You will notice the difference.


Dawid Wajszczuk staff commented 11 months ago

Because you probably didn't make the same change in CSS. You also need to remove d-xxl-block and d-xxl-none classes from buttons responsible for toggling slim mode and sidenav. Then you need to add something like this to your CSS

#slim-toggler {
    display: block!important;
}

#sidenav-toggler {
    display: none!important;
}

And everything will work the same.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: All
  • Browser: all
  • OS: All
  • Provided sample code: No
  • Provided link: Yes