Change background color of dropdown menu- GORAN theme

  • Unknown's avatar
    nwmorcog1 · Member ·

    Hello,

    I cannot seem to find the css for changing the background color of the drop down menu without changing colors of something else like the text or drop down button.

    Also, I am not able to change the hover color of the dropdown button.

    So please let me know what the css for each of these

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    ravichahar · Member ·

    Hi nwmorcog1,

    Custom CSS is a part of the custom design. Free and Personal don’t allow you to add additional CSS.
    https://en.support.wordpress.com/custom-css/

    As I can see, you have a free plan, which means you can’t find an option to add CSS.

  • Unknown's avatar
    apolloirwin · Member ·

    Hi there,

    I inspected the code for the hover color of your dropdown button. So here is the code.

    Copy the entire thing to your custom css section that you can find at Appearance> Customize

    And if you notice the code below, there’s a color code at the last line, just change that to the color that you want and you’re good to go!

    There’s an alternative way to do this, but this is how I would solve the problem quickly it if I were you.

    Hope this helps!

    
pre:before, mark, ins, button, input[type=button], input[type=reset], input[type=submit], a.button, a.button-minimal:hover, a.button-minimal:focus, a.button-minimal:active, .footer-widget-area .menu-item .dropdown-toggle:hover, .site-content .menu-item .dropdown-toggle:hover, .hero, .featured-page .more-link, .grid .more-link, #infinite-handle span, .large-screen .main-navigation ul ul a, .large-screen .main-navigation .menu-item .dropdown-toggle, .large-screen .main-navigation .menu-item .dropdown-toggle:focus, .large-screen .main-navigation ul ul .page_item_has_children>a .dropdown-toggle:hover, .large-screen .main-navigation ul ul .menu-item-has-children>a .dropdown-toggle:hover, .large-screen.hero-image .main-navigation ul ul .page_item_has_children>a .dropdown-toggle:hover, .large-screen.hero-image .main-navigation ul ul .menu-item-has-children>a .dropdown-toggle:hover, .widget_akismet_widget .a-stats a, .footer-widget-area .widget_akismet_widget .a-stats a {
    background-color: #e4d45c;
}
  • Unknown's avatar
    nwmorcog1 · Member ·

    Thank you so much that worked! Can you tell me how to change the hover color now for the drop down menu and the dropdown button?

  • kokkieh · Staff ·

    Hi there,

    First, please remove the code provided to you above. I know @apolloirwin is trying to help, but that is not the best way to do it – it targets way more elements on your site than only the menu background, and using !important like that is going to prevent you from making other changes further down the line.

    New CSS code should also always be added below any existing code you already have, not at the top like you added that code. Browsers read and apply CSS from top to bottom, so the code that comes last will always override any code above it where there is a conflict. Put differently, how any CSS code works will depend on whatever code already exists above it, so adding new code in random places rather than at the bottom can have unforeseen consequences and mess up other stuff in the process.

    Please use this instead:

    /* Change sub-menu button hover color */
.large-screen.hero-image .main-navigation .menu-item .dropdown-toggle:hover {
	background-color: blue;
}
/* Change sub-menu background color */
.large-screen .main-navigation ul ul a {
  background-color: red;
}
/* Change sub-menu hover color */
.large-screen .main-navigation ul ul a:hover {
  background-color: green;
}

    You can replace the color in each case with the actual values you want.

    Also note that your premium plan gives you access to live chat support directly from staff for help with changes like there. You can access live chat support 24 hours during week days at https://wordpress.com/help/contact

  • The topic ‘Change background color of dropdown menu- GORAN theme’ is closed to new replies.