Change menu down arrow background from transparent to a color
-
Hi! I’m using the goran theme and need to change the color of the background of the down facing arrow in the menu bar to a color rather than be transparent. My client is having a hard time seeing the arrow when not hovering over it.
-
Hi there, the site associated with your username is using Twenty Eleven. Did you switch themes, or are you thinking of switching to Goran?
Looking at the Goran demo site, I worked out the following CSS, which would allow you to change the background color on the down arrow buttons on menu items. You can edit the color code as desired.
.hero-image .main-navigation .menu-item .dropdown-toggle, .hero-image .main-navigation .menu-item .dropdown-toggle:focus { background-color: #cc0000; } -
Thank you. No, the site you are seeing is not the one I’m working on. I’ve kept it private until it was finished but since I’m almost done, I’ve made it public.
The code you gave me didn’t work. The background of the arrow is still transparent until you hover over it.
http://www.washingtonsportshof.org
Thank you for any help you can give me!
-
Ah, interesting. We are going to have to use a bigger digital hammer. Replace what I gave you with this.
.hero-image .main-navigation .menu-item .dropdown-toggle, .hero-image .main-navigation .menu-item .dropdown-toggle:focus { background-color: #000 !important; }The reason for this is that you have set some custom colors, which was overriding the change. In general, it is best not to use the !important keyword, but in this case it is the only way we can override the custom colors things.
-
-
- The topic ‘Change menu down arrow background from transparent to a color’ is closed to new replies.