Change menu and dropdown colors

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.

Custom CSS

Dropdown Normal Items

Otherwise, if you want to customize using CSS 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.

Dropdown Heading Items

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.

Menu Icons

The color of menu items are the same as the text of menu items. However, if you want to customize the color of all menu Icons you can use this code snippet into Theme options > Layout > Advanced > Custom css:

.navbar-nav .pix-dropdown-title i {
color: #1274E7 !important;
}

*Note: you can change the color value depending on your needs.

pixfort
pixfort
Essentials support team
hub.pixfort.com

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts