CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
mlamp
mlamp

Reputation: 783

Bootstrap - how to remove hover effect from collapsed navbar only?

I have a page with a navbar where each link scrolls to a section in the page. I have a hover animation like the following:

.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:active {
    box-shadow: 0 4px 0px 0px #62c4a4;
}

This is in addition to bootstrap's default hover animation of making the text darker. There is a demo at code pen here http://codepen.io/meek/pen/NNprYb

On smaller devices, when the collapse list expands, the blue box-shadow hover also triggers. But I don't want it to trigger in the collapsed list anchors, as the bootstrap default hover css is enough for that.

enter image description here

How can I stop the hover effect displaying on the expanded navbar?

Upvotes: 2

Views: 1810

Answers (1)

sznrbrt
sznrbrt

Reputation: 1003

You can use CSS media queries to define, how the buttons should look on different device sizes.

For example, in this particular case to remove the border shadow on the collapsed nav items:

@media (max-width: 768px) {

 .navbar-default .navbar-nav li a:hover, 
 .navbar-default .navbar-nav li a:active, 
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover, 
 .navbar-default .navbar-nav > .active > a:focus {
        box-shadow: none;
 }

}

Upvotes: 2

Related Questions