CSS Question, targetting Bootstrap collapsed navbar

CSS Question, targetting Bootstrap collapsed navbar
0

#1

I am working on a collapse navbar but not sure how to target the collapsed li>a items. For instance, if you click the hamburger, then “Rides”, the color of those items turns to a fuzzy black. Just not sure how to select them in the CSS to style. I can target the dropdown just fine when in large screen, just not sure about when collapsed on smaller screens. Any help appreciated.

Project: https://codepen.io/rbeube77/pen/mBeLxM


#2

Easiest method since you are already using Bootstrap:
(note: different browsers names features differently, but the functionality is still the same, my example is for Chrome)

1: Right-click on the element you’d like to explore and click “inspect”.
2: In the dev tool, go on styles and toggle the :hov substatus.
3: See how bootstrap is selecting that element and which class is adding.
4: Change as you like.

in this case Bootstrap is selecting the link on hover via:

.navbar-default .navbar-nav>li>a:hover

All you have to do is:

.navbar-default .navbar-nav>li>a:hover {
 color: awesome !important
}

Note: you probably need to override the class with an !important declaration. Not the fanciest but get the job done.
Hope it helps :slight_smile:


#3

Very helpful, thank you for your reply.