Topic: Dual Slim Side-Nav - Suggestion / Small Bug
Andrew Ford pro premium priority asked 6 years ago
I would like to add 2 side-navs, that are also slim in a website. Both of them also have to load in the compressed state. And without the .button-collapse to hide, just need the states - compressed and expanded. One on the left (default), and the other on the right.
Is #slide-out important? Probably change it to .sidenav-slide-out instead?
<div id="left-slim" class="side-nav fixed wide"></div>
<div id="right-slim" class="side-nav fixed wide"></div>
$(function() {
'use strict';
$('#left-slim').sideNav();
$('#right-slim').sideNav({
edge: 'right'
});
});
The CSS: left: 0; seems to be forced even when declaring edge: 'right'
One of the side-nav I want to turn into a "Friends Online" list, so I can merge this snippet (https://mdbootstrap.com/snippets/jquery/marta-szymanska/721417) onto my website.
Marta Szymanska staff pro premium answered 6 years ago
Hi,
#slide-out
is important for make side-nav slim. button-collapse
is important for show and hide the side-nav. Would you create a snippet presenting your idea for this layout with two side-navs? For now, I'm not sure how to help you. It would be helpful if you created a demo.
Best, Marta
Andrew Ford pro premium priority answered 6 years ago
I've noticed something that got overlooked.
Right now I will just be focusing on the "Friends Online" list, which I have edge: 'right'
set in the options. The Font Awesome icon for the "minimize" link still acts like it is on the default left side.
I have tried transform: rotate(180deg);
and also tried to add the .fa-rotate-180
on this element - in both attempts the .fa-angle-double-left
/.fa-angle-double-right
(depending on the element's state) vanishes.
I even tried to change to .fa-angle-double-right
, but it just reverts to default.
The one thing I'd like to customize:
- To minimize; change the Font Awesome icon with
.fa-times
. To maximize;.fa-bars
/.fa-stream
.
Marta Szymanska staff pro premium answered 6 years ago
Hi,
would you show me a code? For example in the snippet here: https://mdbootstrap.com/snippets/?
Best, Marta
Andrew Ford pro premium priority commented 6 years ago
Here: https://mdbootstrap.com/snippets/jquery/andrew_ford/934881
Marta Szymanska staff pro premium commented 5 years ago
Hi,
look at my solution for the icon here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/940272?view=project. Look at the bottom of HTML code and a piece of JavaScript code.
Best, Marta
Andrew Ford pro premium priority answered 5 years ago
Thank you Marta, I forgot about using jQuery. Could the fix get put into an update?
I also noticed some CSS got overlooked. Even when the sideNav is set on the right side, padding-left:
is still set. It should be padding-right:
.
And I can see how I can change to any Font Awesome icons I wish with your solution. Could that also include that as more options, like;
.sideNav({
to_open: '', // desired Font Awesome icon
to_close: '', // a different Font Awesome icon
});
Marta Szymanska staff pro premium answered 5 years ago
Hi,
what padding-left, in which component? I don't see this. And if you want to change icons, you can do this in these lines:
$(".sv-slim-icon").removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
,
$(".sv-slim-icon").removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
and in HTML: <a id="toggle-test" class="waves-effect"> <i class="sv-slim-icon fas fa-angle-double-left"></i>Minimize menu</a>
.
Best, Marta
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 jQuery
- MDB Version: 4.8.5
- Device: N/A
- Browser: N/A
- OS: N/A
- Provided sample code: No
- Provided link: Yes