How to make a transparent menu bar in Divi

The top menu bar has many ways to customize (especially in Divi!) And you’ve probably noticed when scrolling that it’s trendy to make the background of the menu bar transparent and the background image look full.

The advantage of this design is that the background image (in some cases even video) envelops the web and all the attention is given to the experience.

Designing the menu in this way makes the integration of the image in the menu absolute, the image is not cut and the menu is still clearly seen in a simple way.

Today we will see how to achieve this effect with two different options!

Transparent or semi-transparent menu for all pages

There is one thing you should keep in mind when you apply this type of configuration to the menu: as it will be on all pages, you must make sure that in each one the background image is sufficiently dark and the letters clear or vice versa, to make enough contrast and never miss the menu items.

It will also depend on your template because in the main page it is easy to configure in this sense, but the other pages such as blogs, categories, contact and more must have a color in the menu that allows the visualization of the elements.

To customize the menu and look transparent or semitransparent we will follow the following procedure:

Enter the Main Menu Bar, this is what we got by clicking on Divi, then Customizing themes and entering Header and navigation.

You will see an item called Background Color, modify the following details:

Color code: There you must place the HTML code of the color for the menu bar.

Transparency or opacity: slide up if you want the selector to be semi-transparent or totally opaque, and down if you want it to be completely transparent.

Text color: There you can select what color the menu items will have so that they make enough contrast with the color of the bar. Remember what we said before, it must be a color that, although it must match the color palette of your brand, it must also contrast with the images or backgrounds of the rest of the pages. Check one by one to make sure you can always read.

With this procedure applying the transparency, the background image will rise to the bottom of the menu.

If your page uses a secondary menu bar, you can repeat this procedure to apply transparency to it, with the difference that you must enter the Sub menu bar.

Transparent or semi-transparent menu only on the homepage

The themes or plugins usually do not have the option of having the menu in one form on one page and in a different way in the others, so we will have to follow a different procedure to achieve this.

First, we must use a page layout without header on the home page, which will depend on the template you are using. With Divi it is possible choosing a blank page layout, this will be selected in page Attributes, then in the template and by selecting Blank page and save the changes. Then we will add the full-width modules for the menu and the image.

The transparent or semitransparent menu you can add it with the Divi builder or the page builder that you are using for the home page only. This also depends on the theme you are using, to add the image we will add a section of full width and we will place the image as a background.

The full-width section with the background image has two modules included: one with full-width menu and one with the title. The latter allows you to add text and images for the title, subtitle, and button.

This mode prevents setting the menu at the top or placing it as floating. When doing scroll it will disappear up.

Full-width section

After created, we add it to the top of the page. The background image that will be seen behind the menu bar is the one that we will upload here accessing the configuration and going down until we see the Background option. In the Image tab, we will upload the image that we selected. Take care that it is in excellent resolution and at the same time fully optimized so that the load time of your page does not fire.

Full-width menu bar

In the full-width section that we created, we will add the menu by clicking on the Content item within the Configuration.

There we can select the menu that we want to place, the background of the menu of which we are interested if it is semitransparent, that has the right color. If you want it transparent, place the transparency at 100%.

In Design, we will select Orientation and we will determine the location of each item or menu item. In Text Menu we will customize details of the text of each item such as font, color, size, etc.

Full-width title

In Full-width title, we can add title, subtitle, buttons, and images in this section. If we select the custom fill we can expand the visibility of the background image that we want to be behind the menu.

What do we do with the logo?

If you’re worried about where to put the logo, you have two ways to solve it:

  • Place the logo under the menu by inserting another module.
  • Place the HTML code to call the image in a custom link in the menu text, so you can appear in the same menu.

Are you ready to further customize your website?