Topic: Sidenav _variables.scss not taking effect. JS adds .sidenav-primary
webservices priority asked 1 year ago
Expected behavior
The variables in /pro/_variables.scss should take effect.
Actual behavior
JavaScript adds .sidenav-primary
when no color value is set using the data-mdb-color
data attribute. This renders many of the $sidenave-*
vars in /pro/_variables.scss as useless/unused.
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/webservices/5402029
Kamila Pieńkowska staff answered 1 year ago
You are correct. This is a bug and we need to fix it. Until then if you need to customize this style you will need to use regular CSS.
webservices priority commented 1 year ago
Thanks. At least now I know I'm not misunderstanding something :-)
Kamila Pieńkowska staff answered 1 year ago
That is not really true. The only overridden variables are color and background color. Color options are available for people who do not want to customize full sidenav visuals themselves.
So you can decide which one you prefer to use.
webservices priority commented 1 year ago
So you can decide which one you prefer to use.
That is the problem. I cannot use one I prefer. MDB is adding .sidenav-primary
to any .sidenav
and will not use the default color vars. Is there a setting I can use to tell the JS not to add a .sidenav-[color]
class? There is nothing I saw in the sidenav docs showing that I can "unset" the color attribute.
I also noticed that it is JS that is hard coding inline CSS to set the width and other things set in vars. Right now I am only setting width in SCSS but its completely ignored due to JS adding inline CSS.
<nav class="sidenav d-print-none sidenav-primary ps ps--active-y" tabindex="-1" data-mdb-hidden="true" data-mdb-right="true" data-mdb-color="none" style="width: 240px; height: 100vh; position: fixed; transition: all 0.3s linear 0s; transform: translateX(0%);" id="mobile-nav">
...
</nav>
Kamila Pieńkowska staff commented 1 year ago
You cannot use the unset option. Color options are used to initiate ripple effect and this is a list of available colors: 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'
What style do you want to customize? I can tell you how to do that.
webservices priority commented 1 year ago
MDB5 adds .sidenav-[color]
if I do not set a color. So the default color variables set in SCSS (e.g. $sidenav-link-active-color
) never get used. I would like to just have .sidenav
be used and no .sidenav-[color]
added at all.
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 6.4.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: Yes
- Provided link: Yes