5.1 Customize your Default Horizontal Menu

Now that we have a bunch of products and product categories, we are ready to set up and customize our shop menus. There are four different types of shop menus. These are the default horizontal menu, a products mega menu, additional top and bottom menus and module menus. In this article, we will cover how to set up and customize our initial default horizontal menu. This is Step 8 in our online store building sequence:

01

Recap of Main Menu CSS Changes

In our CSS Chapter, we improved the main horizontal menu and changed the font size and font family. However, there is no setting in Templates Styles to change the font color or background color.

Here is the current appearance of our horizontal menu:

02

Change the Main Menu Level 1 Font Color

Go to Templates, Styles, Edit Custom Code, Custom CSS. You should see this section:

.item-level-1 .nav-title {

font-weight: bold;

color: #111166;

font-size: 16px;}

.item-level-2 .nav-title {

font-weight: bold;

color: #333399;

font-size: 18px;}

.item-level-3 .nav-title {

font-weight: normal;

color: #222222;

font-size: 16px;

padding: 0px;

line-height: 1.2;}

The Level 1 color is a darker blue, the Level 2 font color is a medium blue and the Level 3 font color is a dark gray.

Change them to the following:

#116611

#339933

#111166

Then Save, Clear Cache and View the site:

03

Change the Background Color

The background colors on every row are set in the Layouts Section. Go to Extensions, Modules, Main Menu and make sure it is in the Protostar module position 1. Then go to Extensions, Templates, Styles, Template One Edit, Layout Section.

04

Astroid divides the page module positions into Sections such as Header, Banner, Content. Each section has at least one column and at least one row.

You can add more rows to each section. Then in each row, you can put more columns. You can then give each column a custom module position name. We will see how this works when we make our module menu items.

For now, we will edit the Astroid Header section since we put the main menu in the Astroid Header section earlier. Click on the hidden pencil just above the Astroid Header column.

Then click on Design Settings. Change the Background Type to Color. Then click on the Square to pick a light background color.

05

Then turn on Custom Colors. Click on the Square box and change the Text color to a dark blue.

06

Then click Save. Then at the top of the screen, click Save and Clear Cache and Preview. Here is the result:

07

The background color was changed to light blue. But the font color is still dark green. This is because settings made in our custom CSS file have priority over settings made by the Template Edit screen. To allow the Module settings to have effect, you will need to delete the color line in the custom CSS box.

What’s Next?

In the next section, we will review how to make a Mega Menu.