"Holver default" (#2062035) / PenciDesign

Comments

1
aldemifr started the conversation
June 27, 2019 at 11:43am
Good Morning!

I'd like to know how to do a custom hover setup on the main theme menu.

I made a menu setting with new colors and with hover effect. The problem is that I am not able to change the color of the active hover default.

Please how to change the color of the menu and how to change the color of the hover?
How to change the default color of the active hover menu?

thank you
501
Penci replied
June 28, 2019 at 1:49am
Hi,
Please go to Customize > Color for Header then scrolldown and change "Main Bar Menu Text Background Hover & Active Background Color" option as screenshot http://prntscr.com/o7pgps
Best Regards,
PenciDesign
1
aldemifr replied
June 28, 2019 at 2:04am
Hi,
Good morning my friend

I saw this option here in the settings of the theme settings
but here I have to choose a default color for all categories of the menu. However I want to choose a specific color for each different category, I do not want a default color for all categories

Do you understand me?

:)

Thx
501
Penci replied
June 28, 2019 at 2:42pm
Hi,
I understand now, but currently this theme doesn't any option to do that.
Please tell me color you want change for each item of menu and send me your website management information ( admin url site, username, password ). I will add custom css to do that help you.
Best Regards,
PenciDesign
aldemifr replied privately

501

Penci replied

July 1, 2019 at 2:08am

Hi,

Plese go to Customize > Addtional CSS then add custom css to do that

/** First item  **/
.main-navigation > ul:not(.children) > li:nth-child(1):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(1):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(1) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(1) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(1) > a,
.main-navigation ul.menu > li:nth-child(1) > a:hover {
 background-color: #8bc34a;
 color: #fff;
}
/** second item **/
.main-navigation > ul:not(.children) > li:nth-child(2):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(2):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(2) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(2) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(2) > a,
.main-navigation ul.menu > li:nth-child(2) > a:hover {
 background-color: #3a4dd5 !important;
    color: #fff;
}
/** Third item **/
.main-navigation > ul:not(.children) > li:nth-child(3):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(3):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(3) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(3) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(3) > a,
.main-navigation ul.menu > li:nth-child(3) > a:hover {
 background-color: #1e9188 !important;
 color: #fff;
}
/** Fourth item **/
.main-navigation > ul:not(.children) > li:nth-child(4):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(4):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(4) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(4) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(4) > a,
.main-navigation ul.menu > li:nth-child(4) > a:hover {
 background-color: #3cad49 !important;
 color: #fff;
}
/** Fifth item **/
.main-navigation > ul:not(.children) > li:nth-child(5):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(5):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(5) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(5) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(5) > a,
.main-navigation ul.menu > li:nth-child(5) > a:hover {
 background-color: #9f46b5 !important;
 color: #fff;
}
/** Sixth item **/
.main-navigation > ul:not(.children) > li:nth-child(6):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(6):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(6) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(6) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(6) > a,
.main-navigation ul.menu > li:nth-child(6) > a:hover {
 background-color: #c84668 !important;
 color: #fff;
}
/** Seventh item **/
.main-navigation > ul:not(.children) > li:nth-child(7):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(7):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(7) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(7) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(7) > a,
.main-navigation ul.menu > li:nth-child(7) > a:hover {
 background-color: #4589b9 !important;
 color: #fff;
}
/** Eighth item **/
.main-navigation > ul:not(.children) > li:nth-child(8):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(8):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(8) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(8) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(8) > a,
.main-navigation ul.menu > li:nth-child(8) > a:hover {
 background-color: #bb9346 !important;
 color: #fff;
}
/** Ninth item **/
.main-navigation > ul:not(.children) > li:nth-child(9):hover > a, 
.main-navigation > ul:not(.children) > li:nth-child(9):active > a,
.main-navigation > ul:not(.children) > li.current-category-ancestor:nth-child(9) > a,
.main-navigation > ul:not(.children) > li.current-menu-ancestor:nth-child(9) > a,
.main-navigation > ul:not(.children) > li.current-menu-item:nth-child(9) > a,
.main-navigation ul.menu > li:nth-child(9) > a:hover {
 background-color: #595959!important;
 color: #fff;
}

You can change color to any color you want

Best Regards,

PenciDesign

1
aldemifr replied
July 1, 2019 at 2:51am
Thank you my friend. You helped me a lot!!!
You're great !!
Congratulations and thank you!

A good day to you!

:)