CODEWITHSUNDEEP
joomlatwitter-bootstrapjoomla3.0
Carlos Jorge Rodriguez
Carlos Jorge Rodriguez

Reputation: 1

Submenu blue color hover in bootstrap

I have a site running joomla 3.0, and I'm trying to customize the menu bar. The template is protostar and Im using the nav-pills style to make the menu bar run horizontal on the top.

The problem that I have is that I cannot find where I need to change or include css to CHANGE the rollover BLUE color on the submenu.

Also I would like to know how to change the color on that white little arrow on the submenu.

Image of the menu I want to edit

Upvotes: 0

Views: 4818

Answers (4)

Derek
Derek

Reputation: 2112

Had the same problem. You can use this selector:

.navigation .nav-child li a:hover{

The KEY THING though is to set 

background-image:none;

as the default style uses a gradient, not just a background colour!

Upvotes: 0

Princer800
Princer800

Reputation: 11

The overall tip worked for me as well. Joomla 3.x must use the .navigation .nav-child:hover section as above. I also had to change the gradient lines section as one of them was being invoked. Just changing the background lines did not show up. I though about deleting them but instead made the start/stop the same. Guessing that what gets used is a browser based choice if an option fits.

Upvotes: 1

Carlos Jorge Rodriguez
Carlos Jorge Rodriguez

Reputation: 1

Thankx for the Help Lodder! Saddly it did not worked. I found that I had to change not the .dropdown-submenu:hover > a { but instead .navigation .nav-child:hover > a { Still thankx for taking to time on trying to help me!

Upvotes: 0

Lodder
Lodder

Reputation: 19733

Just went on the Bootstrap site and inspected the element and it appears to be on lines 2927 to 2934 of bootstrap.css:

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

background-color: #0081c2; is for non CSS3 compatible browsers and everything below is for CSS3 compatible.

Do bare in mind that Joomla may have changed things around in the bootstrap.css file so it may be on a different line, however you can simply search for the following:

.dropdown-submenu:hover > a

Hope this helps

Upvotes: 0

Related Questions