Header and Menu Styling

Appearance > Customize > Header and Menu Styling
The background color of the header containing your site title/logo can be customized here. The color transparency can be customized with the slider bar just below the color picker. You can also type the color code into the area just above the color picker. It accepts hex, rgb or rgba values e.g. #1E242A, rgb(30,36,42), or rgba(30,36,42,0.5).

There are also two extra header background color settings – Scrolled and Hover Effect. The header/menu is ‘sticky’ and will stay in place at the top of the screen when you scroll down the page and the scrolled background color can be customized here. The header area changes to your chosen scrolled color when hovered over. You can disable this setting by selecting the checkbox next to ‘Disable Hover Effect’.

Exoplanet Header Color Picker

You can change the height of the primary menu with the Menu Line Height setting. The default is 82px high.

The navigation menu can be set to display in UPPERCASE by selecting the checkbox next to ‘Menu Uppercase’.

The menu item highlight background color can be changed to a color of your choosing.
To make use of the highlighted menu item(s), when you are creating a primary menu in Appearance > Menus add the word highlight to the CSS class to any of the top-level menu items.

Adding a menu item CSS class

If you don’t see the ‘CSS Classes’ option click on the ‘Screen Options’ tab and make sure the ‘CSS Classes’ option is checked.

Enabling Menu CSS Classes

Enabling the ‘Search Icon’ will allow your website visitors to search your website by clicking the search icon in the menu area.