How to make a transparent header

Updated on January 2, 2019

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

1Add New Page.  

Add a new page on which you want a transparent header.

2Add Page Section.  

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.

Add Page Section

3Add Background.  

You can add Image Background or Video Background inside Page Section.

4Enable Override Global Settings.  

Enable Override Global Settings at the bottom of the page under Jupiter Styling Options section.

Override global Settings

5Configure Header Styles.  

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.

Header Styles

6Upload Specific Logo (Optional).  

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.

Upload Specific Logo

7Enable Transparent Header option.  

Enable Transparent Header option. This is the main option which will trigger transparent header styles.

Transparent Header

8Enable Transparent Header Skin.  

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.

Transparent Header Demo

Transparent Header Skin

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.

Transparent Header Skin Demo

Background Header

Background Color

9Dark/Light.  

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.

Skin Chooser

10Transparent Header Bottom Border Color.  

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.

Transparent Header Bottom Border Color

11Remove Page Title.  

Set Manage Page Elements option under Jupiter Page Options to Remove Page Title.

Remove Page Title

12Enable Stick Template.  

Enable Stick Template option under Jupiter Page Options.

Stick Template

Did this answer your question?