Customizing the Header Menu Appearance

Change appearance of the Header Menu using the Theme Options interface

After creating your own menu, we want to change the appearance of it. Let’s consider the menu we created previously, in the Creating the Header Menu tutorial.

The Header Menu is using a Dark background, while the text of the menu items is white.

Let’s play around with the design options of the Header Menu, by going to Creativo Options -> Header Top -> Header Menu

You will be able to change the actual width of the Sub-Menu items, change the Line Height, force the menu items to become uppercase and also use a Sub-Menu Indicator, if our menu has sub-menu items. Since our menu doesn’t have sub-menu items we will ignore these options for now.

Let’s change the Background color of the Menu and the color of the Menu items.

Changing Background and Text Color

Find the Header Menu Background Color – Modern Header Style option and change the color from black to white.

Scroll up and find the Header Menu Text Color option and change the color to black – we want to have a white background with black text, basically reversing the current colors.

Still here, find the Header Menu Text Color on Hover and change the color to a blue color – this will be the color used when we hover over the menu items.

You should now have something like the following:

So our header menu changed to a white background with dark text and a blue color for menu items when hovering the mouse cursor over them.

We can also change the Font Family, the font weight and actual font size of our Header Menu by going to Creativo Options -> Typography.

Changing the Font Family, Font Weight, Font Size

Select the font family of our Header Menu by using the Theme Options -> Typography -> Header Menu Font Family setting. Blogger uses by default the Playfair Display font family. Change it to Montserrat font family.

Next scroll down and find the Header Menu Font Size(px) option, under Font Sizes.

Drag the slider until the 16 value appears. That’s the value we want to use now: 16px.

A bit down you will find the Header Menu Font Weight – First Level only so if you want to change that, select a different option. We will leave it to 400 for now.

Save Changes and now your menu will look like the image below:

Disable the Search Icon and Shopping Cart Icon

The icons that appear to the right of the menu – the shopping cart icon and the search icon can be easily disabled by going to Creativo Options -> Header Top -> Header Search Icon – this will disable the Search Icon – and by going to Creativo Options -> WooCommerce -> HEADER SHOPPING CART -> Shopping Cart Icon in Header Menu

That’s how you customize the appearance of the Header Menu.