Topic: Activating nav bar items on hover

sanketr free asked 7 years ago

Hello, Does the "navbar" class come with any kind of hover effect? Just like the "sidemenu" of mdbootstrap website does - moving the mouse over the items in the side menu makes it active, to give the users a cue about which menu item is currently under the mouse pointer. Perhaps this is just a css property we could re-use for menu items under "navbar" class? Also, for dropdowns, it will be very nice to have a transition effects. This website shows very well how to do both hover and drop-down transition:

Michal Szymanski staff answered 7 years ago

Hi, unfortunately for navbar there isn't any "ready to use" effect, but it's very easy to create (especially if you use sass). If you want to achieve similar effect to SideNav when hover, use the following snippet (with sass of course):
.YourNavbarElements:hover {
     background-color: lighten( #your color, 5%);
And thank you for the link, we'll take a look at it.

Please insert min. 20 characters.


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


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No