Change Menu main items text color
Menu main items [Desktop]
Menu main items [Tablet & Mobile]
The Menu main items share the same color of the text of the header area that contains the Menu element, and you can change the Menu main items color from the area settings that contains the Menu Element in the Header Builder (in Desktop And Tablet & Mobile versions), for example:
Header areas
Main Header area Text Color options
Change Menu Dropdown colors
Dropdown [Desktop]
Dropdown [Tablet & Mobile]
To change the Menu Dropdown colors (for text and background) on Desktop or Tablet & Mobile, open the Header Builder then click on the Menu Element, for example:
WordPress Panel > Headers > Edit your Header > Click on Menu
Then you will be able to choose the Dropdown background color and the text color (Light or Dark), for example:
Dropdown background and text colors
Note: the Light and Dark text colors are the theme default colors which are set in the Theme options → Typography. For more information about the theme typography you can check this article.
Otherwise, if you want to customize the dropdown Normal items text color you can use this code snippet into Theme options > Layout > Advanced > Custom css:
.dropdown-item .pix-dropdown-title, .dropdown-item .pix-dropdown-title::after {
color: #eee !important;
}*Note: you can change the color value depending on your needs.
And to customize the dropdown Normal items text hover color you can use the following code snippet into Theme options > Layout > Advanced > Custom css:
.dropdown-item:hover .pix-dropdown-title, .dropdown-item:hover .pix-dropdown-title::after, .dropdown-item:focus .pix-dropdown-title, .dropdown-item:focus .pix-dropdown-title::after, .dropdown-item:active .pix-dropdown-title, .dropdown-item:active .pix-dropdown-title::after {
color: #333 !important;
}*Note: you can change the color value depending on your needs.
If you want to customize the dropdown Heading items text color you can use this code snippet into Theme options > Layout > Advanced > Custom css:
.mega-col-title {
color: #888 !important;
}*Note: you can change the color value depending on your needs.
And to customize the dropdown Heading items text hover color you can use the following code snippet into Theme options > Layout > Advanced > Custom css:
.mega-col-title:hover {
color: #333 !important;
}*Note: you can change the color value depending on your needs.
