Slim nav bar

Dawid Wajszczuk staff commented 3 years 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 pro premium priority commented 3 years 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 3 years 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 pro premium priority commented 3 years 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 3 years ago

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

sriramk18 pro premium priority commented 3 years 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 3 years ago

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

sriramk18 pro premium priority commented 3 years ago

Thanks for you help.

sriramk18 pro premium priority commented 3 years 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 3 years ago

What exactly is your issue with this example?

sriramk18 pro premium priority commented 3 years 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 3 years 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.