How to change text color in responsive expanded dropdown menu item in Wordpress theme The Bootstra

Question

I'm skinning the Wordpress theme The Bootstrap 2.0.1, which uses Twitter's bootstrap v2.3.2 and I'm trying to find out how to change the color of dropdown text items visible (which are linked) when a nav item in the collapsed navigation has been clicked open.

I know how to change the text/background color of nav dropdown items through the variables.less file (@navbarText, @navbarLinkColor, @navbarLinkColorHover, etc)

What is stumping me is changing the color of text items when:

The window is resized so that the responsive navigation is collapsed.
The navigation toggle button is clicked to reveal the previously-hidden navigation items.
A menu link is clicked open to reveal the dropdown menu items in the responsive format.

Here's what I mean using one of Bootstrap's default examples modified to illustrate the issue:

<!-- NAVBAR -->
<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<a class="brand" href="#">Site Title</a>

<div class="nav-collapse collapse navbar-collapse">

<ul class="nav">

<li class="active"><a href="#">Home</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Fruits <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">Strawberries</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="#">Apples</a></li>

</ul>

</li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Vegetables <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">Celery</a></li>
<li><a href="#">Cabbage</a></li>
<li><a href="#">Cucumbers</a></li>

</ul>

</li>

</ul>


<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>

</div><!-- /.nav-collapse -->

</div>

</div><!-- /navbar-inner -->

</div><!-- /navbar -->

<!-- NAVBAR -->

The issue is the initial color of the subcategories links (Strawberries, Bananas, Apples or Celery, Cabbage, Cucumber) when the navigation has collapsed due to the browser window being been resized and the main category (Fruits, Vegetables) has been clicked to reveal them.

I can set the background/text color of the expanded dropdown items in the responsive mode when hovering.

What I can't seem to change is the default light grey color the dropdown text items in the responsive mode are initially.

The same light grey text color is used on the dropdown items in the regular responsive nav AND the inverted one. It does not change.

I would like to be able to change that color to something else but I have yet to find a solution.

Thanks for any help you might be able to provide.

are you doing this with lesscss? can i see any type of code or something, what are you currently doing with it? — SaurabhLP
– SaurabhLP, Commented Jun 18, 2013 at 6:34
I'm ediding my initial question to add details about the menu. — Tyrone Williams
– Tyrone Williams, Commented Jun 18, 2013 at 14:14

SaurabhLP · Accepted Answer · 2013-06-20 04:51:21Z

1

i think your question is understandable in the sense that you want to change the background color of hovering as well as active element in your dropdown menu...

In a simplest and easy way, you can simply call the elements of hover and active to a separate file and define with your custom color...

The classes for define your bg colors on hover and active are as follow:-

//For active  states
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus
{ background-color:#f00; //Your Pick }

//For hovering states
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus
{ background-color:#bbb; //Your Pick }

Check my demo for more reference:- http://jsfiddle.net/y7bev/3/

Hope this works for you better...

Thanks...

answered Jun 20, 2013 at 4:51

SaurabhLP

3,6559 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change text color in responsive expanded dropdown menu item in Wordpress theme The Bootstra

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related