This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Menu hover color using "Light" option

  • Creator
  • #18433

    Hello Jason,

    First off, I am a big fan of your templates and have returned many times to purchase Akita for client websites. Love your documentation, videos and support.

    For my current project, I am using the “Light” color option. My client would like the menu links to change color on hover, as is done under the “Slate” and other color options. I have tried mimicking the css of colors.css and colors.min.css to make the style_light match the style_slate code, but to no avail. I did notice that these colors schemes have several differences in the css code.

    Can you please tell me what I need to do make the menu background color or image change during hover for light, as it does for the other colors? By the way, I can change the menu background images if that is what is required.

    link to site:

    Thank you very much in advance, and keep up the great work.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
  • #18434
    Jason Bobich

    Hello Kristen,

    First, thank you for the kind words. I appreciate it. 🙂

    Across all menu styles, when you hover on the buttons, a transparent white 1×1 image is stretched over the background of the button. And so for each menu color, this appears to lighten the menu item when you hover over it. However, I guess the oversight with the theme is that, with the light colored menu, the grey of the buttons is so light that this transparent white image just can’t be seen.

    One idea would be to add one of the theme’s other transparent images instead. Try adding this to “Custom CSS” option on your theme options page:

    #access ul.sf-menu > li > a:hover, 
    #access ul.sf-menu > li > a:focus {
    	background-image: url(;


    Just FYI:

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

    Also, here’s a helpful tutorial on how to use Firebug – The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.


    Thank you for that tip.

    The solution for me was to replace trans-white-8.png with trans-black-5.png in theme.css and theme.min.css (one instance in each css file).

    Thanks again,

    Jason Bobich

    I would suggest not editing core files like this because you’re going to lose these edits next time you update the theme, and months from now you’re probably not going to remember what you changed. If you want to be setup for making CSS customizations, I strongly suggest making customizations properly from a child theme. The above snippet I gave you could simply be placed in your child theme’s style.css.

    It’s entirely up to you, just a suggestion.

    Child theme intro video:

    Switching to a child theme:

    Jason Bobich

    Also, it’s worth noting that theme.css doesn’t actually do anything. It’s just a reference for what theme.min.css was generated from.



    Look at your other menus. mainly the menu in the footer.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.