Topic: Always show burger menu?
Is it possible to always show the burger menu so that the SideNav can be toggled anytime? In this case, on larger screens the side-nav should expand when clicking the burger menu and on smaller screens it should overlay (and be configurable). I looked through the source code and couldn't discern what was toggling the :before content attribute. Also navbar-toggleable-md doesn't seem to do anything?
Here's the closest sample currently: https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-fixed-navbar-fixed.html
Minimal source code example:
<html>
<body class="fixed-sn">
<header>
<div id="slide-out" class="side-nav fixed mdb-sidenav">
</div>
<nav class="navbar navbar-toggleable-md fixed-top navbar-expand-md scrolling-navbar double-nav">
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
</nav>
</header>
<!-- $(".button-collapse").sideNav(); -->
</body>
</html>
Hi,
do you mean sth like this? If so, please check out composition section in the docs.
Best,
Ania
internetjanitor free commented 6 years ago
I tried that one but on larger screens I'd like the side-nav to push the content to the right until the screen is resized smaller, and then collapse responsively. When the screen is large I was hoping to have the burger menu icon visible and toggling it would show/hide the side-nav while pushing the content to the right as if the screen was resized from small to large (for example). So clicking the icon would be more of a permanent showing of the side-nav versus temporary in that example (where clicking in the main content automatically hides it again instead of having it always visible).
Thanks,
Eric
internetjanitor free commented 6 years ago
Another nice feature that I see on material design sites is being able to manually resize the side-nav so that only the icons are visible and not the menu item text. I believe in that instance the menu text is clipped rather than wrapping around.
internetjanitor free commented 6 years ago
To round this out, I also just noticed a side-nav with the burger menu icon aligned vertically with all the side-nav icons (without text and width-sized to fit the icons only) so that could be another option for supporting the few most common ways people are constructing a SideNav these days. For me personally I want to avoid having any UI elements disappear unless they have to for small screens so I'm looking for a burger icon that feels more permanent and available rather than appearing and requiring attention away from the task at hand. I also think hiding or minimizing the side-nav menu can be useful for working in full-screen mode or close to it on a task. On small screens I could even envision a 2 stage side-nav that expands with icons and then can be expanded again for text descriptions but this isn't my current focus or direction (I'm okay with the space used for the text descriptions at the moment).
Piotr Glejzer staff commented 6 years ago
Hi internetjanitor,
our sidenav doesn't have an option with button ''close siednav'. Our sidenav is working that you see, if you click on a button it will show sidenav and it will cover clicked button and if you would like to close sidneav one of the options is click on the background.
But I understand what you are talking about but unfortunately, We can't do anything about our sidenav right now, cause there is no more option with that. We have plans to refactoring that but it is in our list 'to-do' and we can't give ETA time for anybody about this task. Sorry about that. I know that is a hot topic.
Best,
Piotr
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.15
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: Yes