Video Transcript:

If you want to add a background color to your navigation menu, you can do so by clicking on the Shape Options tab, and selecting Color Fill from the drop down menu. You could also choose one of the other 3 options but for this tutorial, we will focus on Color Fill as that is what most of you will be choosing. You can also change the background color that appears when the mouse is hovering over the link by clicking next to where it says Fill and selecting Mouse Over, and then choosing for the color for that. You can also choose the Mouse Down color which will appear when the user is clicking on the link.

The background can further be changed by selecting the Widget Settings tab, and making adjustments to the values for padding, spacing, and minimum width.

For example, you will see that while I increase the value for Padding, the size of the background begins to increase. If I want this background to have no spaces in between each of the links, I will need to make the value in the Spacing field 0.

You might notice that when the links are separated from each other, they are different sizes. For example, the background for the Contact Us link is wider than the button for the Home page link. If you want to make all the buttons the exact same width, you can adjust the value for minimum width. This method can also help you to make your navigation menu spread across the entire width of your page.

Those are the basic principles for adding a background to your navigation menu. Make sure to watch part 3 where we cover drop down menus.