WordPress.org

Forums

Coller
Different colors in hover -Coller theme (10 posts)

  1. Dilopo
    Member
    Posted 1 year ago #

    I would like to change the hover color from turqouise to a different color for every menu button. What do I have to do to make this work?

    Thanks in advance!

  2. CrouchingBruin
    Member
    Posted 1 year ago #

    Go to Appearance > Coller Settings > Basic.

    Scroll down to the Custom CSS field and copy & paste this rule:

    #site-navigation a:hover {
    border-top: #0000FF solid 4px;
    }

    #0000FF is the RGB hex notation for blue, use whatever color value you want.

  3. Dilopo
    Member
    Posted 1 year ago #

    Thanks, but I guess I wasn't really clear with my question.
    The thing I'm searching for is to give every menu button a different color when sliding over it.
    For example: The first tab <home> is blue, the second tab <information> is red, and so on.

    Could you help me with this one?

  4. Dilopo
    Member
    Posted 1 year ago #

    In addition to the last post, I only want to change the small line, not the whole button.

    Thanks in advance!

  5. CrouchingBruin
    Member
    Posted 1 year ago #

    OK, thank you for the clarification.

    You just need a slight modification to the above CSS. Here are the first two rules that you'll need, the first rule is for the first menu item, the second rule is for the second menu item:

    #site-navigation li:nth-child(1) a:hover {
    border-top: #FF0000 solid 4px;
    }
    
    #site-navigation li:nth-child(2) a:hover {
    border-top: #0000FF solid 4px;
    }

    The key is using what's called the nth-child(n) pseudo-selector. The li:nth-child(1) selects the first menu item, the li:nth-child(2) selects the second menu item. So just repeat each rule for as many menu items that you have, i.e., add a rule for li:nth-child(3) to target the third menu item, and so on.

    Then for each rule, change the hex value for the border-top (the line that goes across the top of the menu item). In the example above, the first menu item gets a color of red, the second menu item gets a color of blue.

  6. Dilopo
    Member
    Posted 1 year ago #

    Thanks, thanks, thanks! It works excellent!

    My submenu's do have the same colors. Is there a possibility to give them the same color as the main menu button instead of all the colors in the main menu buttons.

  7. CrouchingBruin
    Member
    Posted 1 year ago #

    How strange. I just did a test on my sandbox site, and some of my submenus had the same color as the parent menu item, but others took on the color of the top level menu items. I'll have to take a look.

    Edit: Ok, it looks like if I don't define a rule for a top level menu item, then the submenu items below it take on the colors of the top level menu items.

  8. Dilopo
    Member
    Posted 1 year ago #

    Have that too, don't strictly follow the parent menu item.
    What solution did you came up with?

  9. Dilopo
    Member
    Posted 1 year ago #

    When sliding over the menu buttons the colors I wanted show up.
    But when clicking on the buttons make all the buttonlines black, can I change that color also. It's ok when it's the same color for all button in this case.

  10. CrouchingBruin
    Member
    Posted 1 year ago #

    Change above code to this. Make sure a rule is defined for each menu item, even if it's the default color of #0C9.

    #site-navigation li:nth-child(1) a:hover,
    #site-navigation li:nth-child(1):hover a,
    #site-navigation li.current_page_item:nth-child(1) a {
    border-top: #FF0000 solid 4px;
    }
    
    #site-navigation li:nth-child(2) a:hover,
    #site-navigation li:nth-child(2):hover a,
    #site-navigation li.current_page_item:nth-child(2) a {
    border-top: #0000FF solid 4px;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic