Topic: How to position navbar-collapse to 100% width of screen and position text to the left
Expected behavior How to position navbar-collapse to 100% width of screen and position text to the left like in this example: https://ibb.co/m5vsRwL Actual behavior Position of navbar-collapse is not 100% width of screen and it is in the center of the screen here is example: https://ibb.co/mXYyjCm Resources (screenshots, code snippets etc.) Here is the link to the code snippet of actual behavior: https://mdbootstrap.com/snippets/standard/demzl25/4430394
Here is a snippet with a solution: https://mdbootstrap.com/snippets/standard/kpienkowska/6304242
You had a display set to grid on the container with a menu.
demzl25 priority commented 1 month ago
Thank you for the help. On your solution is navbar-collapse is 100% width of screen only on xs breakpoint. How to set width 100% also on sm and md breakpoint?
Grzegorz Bujański staff commented 1 month ago
You can change the CSS class navbar-expand-lg to e.g.: navbar-expand-sm to change breakpoint to sm
demzl25 priority commented 1 month ago
Its not what I meant here is clip with example: https://streamable.com/w9geql On your solution is navbar-collapse is 100% width of screen only on xs breakpoint. How to set width 100% of screen also on sm and md breakpoint?
Grzegorz Bujański staff commented 1 month ago
Do you mean something like this? https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/6306769
I changed the container class to container-lg
demzl25 priority commented 1 month ago
Thanks yes this is ti.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 8.0.0
- Device: Pc
- Browser: chrome
- OS: windows 11
- Provided sample code: No
- Provided link: Yes