Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

sriramk18 priority asked 2 years ago


I have used the MDB side navigation in my web application,

I am facing few issues with the side nav

1) When the side navigation is collapsed, the text gets closer to the image and still the text is visible?

2) When i click on any one of the link in the side nav, the side nav is displayed as slim bar?

3) Need to apply custom color on the hover event of the side nav?

4) When i used the web application, i want the side nav as "Push", but push is not working?

https://mdbootstrap.com/snippets/standard/sriramk18/4174908


Mateusz Lazaru staff answered 2 years ago


hi,

1.Do you want to make text invisible when collapsed? If that is the case, use:

  <li class="sidenav-item">
    <a class="sidenav-link" href=".">
      <i class="fas fa-flask fa-2x me-3" style="width:50px"></i>
      <span data-mdb-slim="false">Laboratory</span>
    </a>
  </li>;

2.Check out this example. Clicking link doesn't toggle slim sidenav in it's default behavior. However its possible to change it by adding sidenavInstance.toggleSlim(); to every link inside sidenav.

3.It can be done via CSS. Remember to use strong selector like:

.sidenav-primary .sidenav-item .sidenav-link:hover {
  background-color: rgb(241,207,187, 0.33)
}

4.I will add a task for it because it seems to not work correctly.


sriramk18 priority commented 2 years ago

One more clarification is required regarding side slim navigation,

The selected menu is not getting highlighted after form post back. The selection is gone after the form is post back.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.3.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes