How to edit the Wix menu design of the drop down menu?

Wix has a lot of features that make it easy for people to build their own website, but the most important part of any website is its navigation menu. If you’re trying to edit the Wix drop down menu, here are a few simple steps to follow.

Wix is a great website builder, it’s simple and easy to use. You can edit the menu design of your drop down menu easily. It is possible to add new links and change the order of existing links as well as changing their font, font size and colour.

Understanding Wix Menu and SubMenu

Wix refers to a site navigation menu as a menu container and the drop down menus are referred to as sub menu containers links or text in your menu are referred to as menu items.

Now this is important because when you’re actually customizing these different elements you’re going to need to refer to those terms again the menu container and the submenu container and menu items because that’s what you’re actually going to see in Wix.

It is important to note that your drop down menus and your menu items they inherit their design from the actual menu that you selected so the easiest way to change the appearance of your menu and drop down menus is to go ahead and change the entire style of your navigation menu.

Easiest Way to Edit Your Menu & SubMenu

To customize the different elements and to change the appearance of your entire navigation menu from the site editor, follow the steps below:

  1. Click on the menu element
  2. Bring up the edit options for that specific element
  3. Click on the design button (little paintbrush icon) which will bring up the menu design
  4. You will see templates. Wix provides you with a ton of templated or out of the box menu designs so if you wanted to change the entire appearance of your menu and drop down menus you can just go ahead and select one of these if they meet your requirements
  5. Select one and you will see a little blue check indicating that this has been applied
  6. Click on the x and preview your site so you can see how your navigation menu has changed and you can see here that the drop down menus have also changed and have now inherited the design based on that template that you selected

This is the easiest way for you to change your navigation menu but we’re going to now learn a very detailed walkthrough of how you can customize all of the different elements of your navigation menu.

How to Change the Wix Menu Shape & Style

  1. To customize your site menus what you want to do again is you want to click on the menu element and then you want to go ahead and click on the design icon which is the paint brush. This is going to bring up the menu design.
  2. click on customize design and this is where you can actually come to customize all of the different elements of your site navigation and drop down menus now
  3. The first thing that we’re going to look at how to change the menu shape and style now at the very top of the menu design you’ll notice here that you have these different shape options so if you wanted to change the appearance of your menu you can go ahead and select one of these now for demonstration purposes
  4. Select one that you desire and you can see that your site navigation menu has changed now.
  5. Click on preview so you can actually see what this looks like on the live site and you can see that your navigation menu has changed and the drop-down menus are now also changed.
  6. Top change it the shapes, click on your menu element and click on the design icon and click on customize design and you can again change the appearance or the style of your menu just by selecting one of these shapes.
  7. You will see that again there are a variety of different styles that you can apply now you can go ahead and click undo to revert that change.

How to change the background color of your site menus

  1. Click into the fill color and opacity menu and this is where you can come to actually change the background color of your sub menus and your separators
  2. You’ll notice the phrase or the label sub menu background that is actually referring to the drop down menus of your site and you would have noticed when you previewed your site that the background was a different color now if you want to go ahead and change the color of your drop-down menus you want to go ahead and click into the color picker and this is going to display a series of options so you will see the colors associated with the theme of your site you’ll see some preset colors.
  3. If you wanted to add a custom color you can go ahead and click on this add button and this is going to bring up the color definition menu where you could either just select a color or use a hex code rgb code etc
  4. You can go ahead and change your drop down menu to your desired color byl clicking apply and you can see that has been applied and if i wanted to actually see what this looks like you could just close out of the menu completely and now if you preview the site when you hover over one of my menu items you can see that the background color is now changed.
  5. Click back into my editor and again just remember you want to click on your element click on the paintbrush click on customize design and this is going to bring you into where you can actually customize the different elements of your menus now in the fill color and opacity menu the other option that you see here is the separator group now the separator refers to the lines that divide your menu items.

You May Also Like…