Change menu down arrow background from transparent to a color

  • Unknown's avatar

    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.

  • Unknown's avatar

    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;
    }
  • Unknown's avatar

    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!

  • Unknown's avatar

    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.

  • Unknown's avatar

    Perfect!! Thank you so, so much! I’ve been struggling with this for some time now.

  • Unknown's avatar

    Hooray and you are welcome! We are always here, so don’t struggle too long. :)

  • The topic ‘Change menu down arrow background from transparent to a color’ is closed to new replies.