Okay
  Public Ticket #2492887
menu item color
Closed

Comments

  • alex started the conversation

    Right now each menu item seems to match the color of one of my accent colors. How do I customize this if I want to match all menu items with the same color?

  •  1,701
    Support Agent replied

    Hi Alex,

    Please add the following css code to Appearance> Customize> General settings> Custom css:

    .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 4):hover > a { background-color: yellow !important; } .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 1):hover > a { background-color:  yellow !important; } .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 2):hover > a { background-color: yellow !important; } .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 3):hover > a { background-color:  yellow !important;}

    Adjust color to your needs.

    Let us know if that helped.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • alex replied

    Definitely helped, we are on the right track, but how would i make the secondary menu items a specific color. Right now the top menu is yellow, but anything secondary is still a mixture of whatever I have as accents. I would like to either have them all match, top item and secondary, or at least all top one color and all secondary one color, not mixed.

  •  1,701
    Support Agent replied

    Hi,

    Please add the following css code to Appearance> Customize> General settings> Custom css:

     .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 2) ul li:hover > a {
        background-color: #ffd200;
    }  .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 3) ul li:hover > a {
        background-color: #ffd200;
    }  .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 4) ul li:hover > a {
        background-color: #ffd200;
    }  .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 1) ul li:hover > a {
        background-color: #ffd200;
    }

    Please adjust color to your needs.

    Let us know if that helped.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • alex replied

    this changes the main hover color of the menu, but i still cant change the hover color of secondary/child menu items

  •  1,701
    Support Agent replied

    Hi Alex,

    We have inspected your website, change yellow color to #bca568 and all items and subitems has the same background on hover:

    9783693807.png

    Did you try to achieve that?

    Let us know if you need additional assistance.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • alex replied

    I appreciate you doing it, but i was hoping you could tell me how you did it, so i wouldnt have to bother you the next time I want to change a different color. Also, it seems the line at the top of the menu items still have an accent color? Could you tell me where i go to edit those as well?

  •  1,701
    Support Agent replied

    Hi Alex,

    Please note that all your requirements related to color of menu items must be solved with additional css, so there are no settings on elements or in Customizer.

    Regarding the changing of color we changed color in css code:

    2257109652.png

    In order to change color at the top of submenu, please add the following css code to Appearance> Customize> General settings> Custom css:

    .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 1) > ul {
        border-color: #a082d2 transparent #e5e5e5;
    }
    .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 2) > ul {
        border-color: #a082d2 transparent #e5e5e5;
    }
    .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 3) > ul {
        border-color: #a082d2 transparent #e5e5e5;
    }
    .btMenuHorizontal .menuPort nav > ul > li:nth-child(4n + 4) > ul {
        border-color: #a082d2 transparent #e5e5e5;
    }

     

     Let us know if that helped.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!