I love doing small things with Divi that result in big changes in web design, and applying transparencies (or levels of opacity) is one of those big little things.
Today we are going to see how to make the fixed navigation bar semi-transparent. Starting from a normal navigation menu, with an opaque background, if fixed, it becomes semitransparent.
Table of Contents
Activate Divi’s fixed navigation bar
To achieve this effect, the first thing you have to do is to have the fixed navigation active, and this is activated in the settings of the Divi theme, in the administration of your WordPress. Specifically under Divi -> Theme Options -> General -> Fixed Navigation Bar.
Activate the selector and save the changes. Now you can personalize the fixed navigation.
Semi-transparent fixed navigation from Divi
The mode without code would be to go to the theme customizer, from the menu of Appearance -> Customize.
Once there go to the Header and Navigation section -> Fixed Navigation Settings.
In this settings section, display the item called PRIMARY MENU BACKGROUND COLOR, where you will see 2 color selectors.
The first one (left) is to choose the main color, and the one on the right, the second one, is the transparency to be applied to the previously selected main color.
Move the selector and check that your fixed navigation bar becomes semi-transparent when scrolling on the page you are viewing.
Tip: You can also do just the opposite, make transparent the main navigation bar and opaque the fixed navigation, you will find the same controls in both adjustment sections.
Semi-transparent fixed navigation with CSS
Another possibility is to add some code in the additional CSS section of the customizer, so that changes are applied without having to touch a single customizer setting.
The code to be added would look like this:
/* Primary navigation bar color Divi */
#main-header {background-color: rgba(255,255,255,1);}
/* Fixed navigation color Divi */
#main-header.et-fixed-header {background-color: rgba(255,255,255,0.5);}Code language: CSS (css)In this example, we have chosen the white color in rgba (255,255,255) and the 4th value is the opacity level, which in the first line (normal navigation bar) is at 1 (totally opaque), however, in the fixed navigation line we put that value at 0.5, that is, semi-transparent.
Of course, you can change the values of the background color and opacity.
Tip: As with the nocode method, you can do just the opposite, and apply semi-transparency to normal navigation and opaque to fixed navigation, simply by changing the opacity value in the code.
Read this post in Spanish: Tutorial Divi: Cómo hacer semi transparente la navegación fija
