How to make a transparent header

Last Updated on

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

1
Add New Page.  

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

2
Add Page Section.  

Add a Page Section (edge slider, page title box shortcode or anything that has a background image feature) into the page using Visual Composer.

Add Page Section

3
Add Background.  

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

4
Enable Override Global Settings.  

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

Override global Settings

5
Configure 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

6
Upload 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

7
Enable Transparent Header option.  

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

Transparent Header

8
Enable 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

9
Dark/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

10
Transparent 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

11
Remove Page Title.  

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

Remove Page Title

12
Enable Stick Template.  

Enable Stick Template option under Jupiter Page Options.

Stick Template

x
Note: Creating a global transparent header is possible via the new feature in Jupiter called Header Builder. To learn more about this, read this article.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket