With the introduction of Jupiter version 4.0, there is a new way to make transparent header. This tutorial will walk you through making one.
Steps to make a transparent Header
Add a new page on which you want a transparent header.
Add a Page Section (Edge Slider, Page Title box shortcode or anything that has a background image feature) into the page using WPBakery Page Builder.
You can add Image Background or Video Background inside Page Section.
Enable Override Global Settings at the bottom of the page under Jupiter Styling Options section.
Configure the header styles that you want to have for this page using the Header Styles option. For more detailed information about this option, please click here.
Upload a specific logo for the page using Upload options. If you do not select these options, default global settings from Theme Options will be used.
Enable Transparent Header option. This is the main option which will trigger transparent header styles.
Set Enable Transparent Header Skin option according the guide below:
If you disable this option, the header will be fully transparent with no background color, header border background, and none of the main navigation coloring (except sub menus) settings will be applied from theme options.
If you enable this option, the header will have background color and you can set the color and alpha by clicking on Header section of Background Color & Texture under Jupiter Styling Options. Having Alpha property of background color less than 100%, will make a semi transparent effect in your transparent header.
Decide if you want a Light or Dark transparent header by setting the Transparent Header Skin option. Set this according to the background nature of the element which will go behind transparent header. This option is presented to avoid having dark/light text on a dark/light background. Try to keep the contrast by selecting correct option here.
Enable/Disable Transparent Header Bottom Border Color. You can decide to have a border line at the lower section of transparent header or not. This option is only for transparent headers and will not work on other header modes, such as sticky. Leave the color selection box to disable this option, or set a color for the border line to enable it.
Set Manage Page Elements option under Jupiter Page Options to Remove Page Title.
Enable Stick Template option under Jupiter Page Options.
