Sidenav not working properly

Topic: Sidenav not working properly

Arsenii pro asked 7 years ago

I copied the code from Advanced->SideNav->"Basic usage" section. I can open/hide sidenav and see its content. But when I hover mouse over links nothing happens. I can't click or show collapsed content. No errors in console shown. The same is for navbars with sidenavs. There is also problem with navbar - it has white color and text color. As for ordinary navbar from "Regular non-fixed Navbar" section it works properly. I checked may be it was related to "pro" components but I tried an other one and it everything was fine with it. Also I need a sidenav you can't hide. Fixed classes doesn't provide such functionality.

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Hello Arsenii, Did you attach skin class to index.html body element? Without skin, navbar is white, and you're unable to click any things from sidenav. For now, we haven't got component like sidenav which you cannot hide. You have to change your style to get your expected behavior. I will add this to our nice-to-have list, that in future, it may be implemented. Best Regards, Damian

Arsenii pro commented 7 years ago

Hello Damian, Thank you for the reply. It was strage to me to add skin class because in version 5.0.5 everything worked without it. Moreover, for me skin doesn't have any sense because I need custom color of side nav and set it like <mdb-sidenav class="side-nav-dark elegant-color fixed"> What is skin needed for? With adding skin side nav is working. How can it be customized correctly if I just need font and link elements size increased? If I make changes to <mdb-item> the style just not working, if I make changes to <mdb-item-head> padding works but apparently providing wrong element highlighting shadow. Can you please also explain what .fixed class and [fixed] input needed for? They strangely affect sidenav opening button but don't affect sidenav itself. Regards, Arsenii

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Dear Arsenii, If you don't want to use skin class, please head into /scss/angular/pro/_sidenav.scss, and at the end of the file, please add this code:

.sidenav-bg {

position: fixed;

}

This will help you with non-clickable sidenav without skin class.

.fixed class and [fixed] input are needed for fixed navigation. What do you mean by writing, that those class and input strangely affects sidenav opening button?

Best Regards,

Damian

Subhash Ekkaluru pro commented 7 years ago

hi, sidenav menu collapse is not working

Damian Gemza staff commented 7 years ago

Dear Subhash Ekkaluru, What's exactly doesn't work? Could you please provide me more information about that problem? Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Arsenii

Pro User

69Support score
16Questions 5Answers

0Snippets likes 0Snippets