Add a background colour to your main menu and adjust the spacing

This tutorial involves a few options that coincide with one another when you want to add a background colour to your main menu container. When we do this, the menu items will be touching right up against the sides of the block container that gets a background colour.

Example:

menu bg padding1

When we add the background colour, you can see the menu is touching the left side of the container, so we need to adjust the padding space. However, before we do that, let’s add a background colour to our menu…

Menu Background Colour

  1. Go to Appearance >> Customize >> Colours
  2. Look for the “Main Menu Background” setting and choose the colour you want. You have other main menu colours you may want to adjust while you are here. 
    menu bg setting
  3. Click “Save & Publish

Adjust the Padding

Now we need to adjust the padding space so it doesn’t touch the edge of the menu container like you see in the screenshot as posted previously. By default, the padding is set to 0 (0 pixels), so if you want to change this to 10 pixels, then you only enter 10 into the field.

  1. Go to Appearance >> Customize >> Site Options
  2. Look for the “Main Menu Padding” setting
    menu padding setting
  3. Click “Save & Publish

When done, your menu padding should look something like this:

menu bg padding2

The Menu is Too Close to the Site Title

You may notice that main menu container is very close to the site tagline and title, so we need to make an adjustment. 

  1. Go to Appearance >> Customize >> Site Options
  2. Look for the “Main Menu Top Margin” setting and make your change. Default is 0 (0 pixels), so if you want 10 pixels, enter only 10 into the field.
    menu top margin setting
  3. Click “Save & Publish

Once done, your menu position should look like this now:

menu bg padding3