A very popular style for the DIVI menu is the transparent navigation bar over a fullwidth header, such as the menu you see here on our site. The common struggle with the transparent menu is that it looks great when the page loads; however, when a viewer begins to scroll, the menu items interfere with the page content and look awful, like this:
The fix is easy and there is no CSS required!
STEP 1 – Primary Navigation Settings: First we’re going to set up the transparent menu. Go to Customizer > Header & Navigation > Primary Menu Bar. Here you will choose to hide or display your logo, and set the height of your menu, text size and color, etc. In the background color field, there are 2 sliders for the color. The one on the left is for the actual color, and the one on the right is the opacity. Slide the opacity all the way to the bottom, and now you have a transparent menu. If you are using sub pages, you can do the same set up for the dropdown menu background also. This is the transparent menu that viewers will see when they land on your page, before they begin to scroll. Save your changes but don’t close out of your customizer – we’re not done yet.
STEP 2 – Fixed Navigation Settings: Now we need to create the menu after scroll, which will need less opacity so that it does not interfere with your page content. Still in the Customizer > Header & Navigation settings, select Fixed Navigation Settings. Again, you will select whether you want to show or hide the logo, menu height, text size, text color, etc. (Note: If you do not want the typical shrinking menu effect where the menu reduces in size after scroll, set your fixed menu height to the same value as you used for your primary navigation menu height.) For your Primary Menu Background Color, here we’re going to select a less opaque or totally solid color that will give the nav bar some definition when viewers scroll, and will provide contrast against the content. For our menu on divihelp.com, we’ve selected a white background so the nav blends in with the content area, and set the opacity to 0.95 which makes both the menu items and content perfectly readable during scroll.
STEP 3: DON’T FORGET ABOUT MOBILE!
Now the final step is to set up your mobile menu in a similar fashion. In your Customizer, go to Mobile Styles > Mobile Menu and select your text color and background color in the same manner as above. The mobile menu settings are not split up into Primary and Fixed like the desktop options, so you may need to adjust your color scheme and opacity accordingly since the same menu will need to be legible at both page load and scroll. For divihelp.com, we’ve given our mobile nav a background color of a smoky blue/gray with a 0.26 opacity. This makes the background nearly transparent against the header image, but also gives sufficient definition if a viewer opens the menu against the page content area.
That’s all there is to it! Remember to check your menu in all sizes and make any minor adjustments that might be needed. The hardest part is picking the right color and opacity, and there usually is a bit of trial and error involved so don’t be discouraged if your first attempt doesn’t come out quite perfect. Ours never does either!