Topic: Please give me a guideline for make this navbar responsive
Here is a snippet : https://mdbootstrap.com/snippets/standard/kpienkowska/6285712?view=project#html-tab-view
I want to make the initially closed side navbar the same as this page:- https://mdbootstrap.com/docs/standard/
but in this snippet template that you have provided https://mdbootstrap.com/snippets/standard/kpienkowska/6285712?view=project#html-tab-view side nave bar is always open on the laptop screen what should I have to do for make it initially close in the laptop screen. as used in https://mdbootstrap.com/docs/standard/ please guide me....
To modify the side navbar in the snippet you provided so that it is initially closed on laptop screens, similar to the one in the MDB documentation example, you can follow these steps: 1. Modify the Navbar HTML to Include a Collapse FeatureThe navbar you have is likely using the standard Bootstrap layout for the side navbar, but we need to make sure the navbar is collapsible on larger screens (laptop). MDB uses JavaScript to control the behavior of the navbar (open and close) based on screen size. EHallPass Website
- Update the Navbar Code to Use the Collapse ClassYou can update the sidebar to initially be collapsed and then use a button (like a hamburger menu) to toggle its visibility on larger screens.
Your snippet in the initial question was based on the solution with sidenav in the mode side and visible by default if the window was 1440px or wider.
You need to remove JS code that shows sidenav on resize for this window width also you have data-mdb-hidden="false" which makes sidenav visible on initial init.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 8.1.0
- Device: LAPTOP
- Browser: CHROME
- OS: WINDOWS 11
- Provided sample code: No
- Provided link: Yes