CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
user3173534
user3173534

Reputation: 11

Bootstrap 3 -- Changing hover style on navbar collapse?

Working with Bootstrap 3, I'm trying to figure out how to trigger a class/style change on .navbar-default .navbar-nav > li > a:hover when the navbar collapses.

When the navbar is fully expanded, I would like the border color to change on mouse hover. When the navbar is collapsed, I would like the background color to change (in the dropdown) on mouse hover.

I'm thinking whatever is triggering the navbar collapse can toggle the class, but I can't find where this is happening.

Is this possible to make bootstrap trigger the style change, or will I need to write a custom function? Any other suggestions on how to accomplish this?

Cheers.

Upvotes: 1

Views: 3799

Answers (2)

Dmitry T
Dmitry T

Reputation: 93

Make sense what you are saying regarding hover in mobile. However, sometimes you make your browser window smaller and in this case collapsed navbar shows up with content not suitable for a small menu. I'm still trying to figure out how to achieve that without using media-queries. In my case I'm trying to remove FontAwesome icon that I use on hover. I'll be glad to hear suggestions.

Upvotes: 0

Schmalzy
Schmalzy

Reputation: 17324

You can do this with media-queries in your CSS. jsFiddle Demo

// Navbar expanded
@media (min-width: 768px){
    .navbar-default .navbar-nav > li > a:hover{
        border: 1px solid red;
    }
}

//Navbar collapsed
@media (max-width: 768px){
    .navbar-default .navbar-nav > li > a:hover{
        background-color: red;
    }
}

But there are a few problems with this...

  • navbav-nav links dont have a border, so adding one might cause the size of the the navbar to change.
  • When the navbar is collapsed, it is meant for mobile devices, so "Hover" isn't really applicable on (touch) mobile devices. I mean, how often do you use a browser window that is less than 768px wide on a desktop?

Upvotes: 4

Related Questions