Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 18, 2013 at 12:16 pm #7249
    fritzhesse
    Member

    Using Catch Everest Pro

    In the theme options there is a setting for “Menu Hover & Active Background Color:” which is great.  However – I may want to actually have a different color for the hover versus the active.  Could I override one of these in the custom CSS?

    April 20, 2013 at 3:10 am #7361
    Sakin
    Keymaster

    @fritzhesse: Yes you can do that. Send me your site URL and I will send you the custom CSS.

    April 20, 2013 at 3:14 am #7363
    Sakin
    Keymaster

    @fritzhesse: You can just reset our Color options in Theme Options and add the following CSS in Custom CSS box in Theme Options panel.
    `
    /* For Hover Menu */
    #header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus { background-color: #4385cd; }
    /* For Active Menu */
    #header-menu .menu .current-menu-item > a, #header-menu .menu .current-menu-ancestor > a, #header-menu .menu .current_page_item > a, #header-menu .menu .current_page_ancestor > a { background-color: #4385cd; }
    `

    April 20, 2013 at 3:15 am #7364
    fritzhesse
    Member

    Thanks Sakin –

    The site is http://www.lacostafilmfestival.org

    Appreciate your help!

    April 20, 2013 at 4:13 pm #7408
    Sakin
    Keymaster

    @fritzhesse: You site is password protected. have you try adding in the css i have you.

    April 21, 2013 at 3:40 am #7440
    fritzhesse
    Member

    The changes worked well.  Thanks!

    April 22, 2013 at 2:46 am #7504
    fritzhesse
    Member

    Adding to this – is there a way to change the color of the active page text only?  For example in the previous solution you provided, I was able to change the background but not the text color for the active menu.  I would like my active menu text blue, with a white background.     IF I wanted to make the active menu underlined, is that a simple border change?
    `/* For Active Menu */
    #header-menu .menu .current-menu-item > a,
    #header-menu .menu .current-menu-ancestor > a,
    #header-menu .menu .current_page_item > a,
    #header-menu .menu .current_page_ancestor > a { background-color: #4385cd; }`
    Thanks!

     

     

    April 22, 2013 at 10:49 pm #7561
    Sakin
    Keymaster

    For text, change the color code in color.
    `
    /* For Active Menu */
    #header-menu .menu .current-menu-item > a,
    #header-menu .menu .current-menu-ancestor > a,
    #header-menu .menu .current_page_item > a,
    #header-menu .menu .current_page_ancestor > a { background-color: #4385cd; color: #fff; text-decoration: underline; }
    `

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Different Menu Hover & Active Background Colors’ is closed to new replies.