Activating nav bar items on hover

Topic: Activating nav bar items on hover

sanketr asked 9 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: http://www.newmediacampaigns.com/blog/nicer-navigation-with-css-transitions

Add comment

Michal Szymanski staff pro premium priority answered 9 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

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

sanketr

0Support score
1Questions 0Answers

0Snippets likes 0Snippets