Creating a transparent header

Updated on August 4, 2019

How to make header overlap the web content?

Jupiter X has a lot of customizations to create a stylish header for your website. You can make the website’s header overlap the page content and set this feature for a specific screen size as well.

To have a Transparent Header you must:

  • Enable the Overlap Content for the header
  • Make the header’s background transparent.

Enabling the Overlap Content

1. From WordPress left menu go to Jupiter X > Customize > Header.

2. Enable the Overlap Content option.

3. By hovering over the Monitor icon, you can define the Overlapping function for smaller screen sizes like tablet and mobile.

4. Close the Header option and Publish the settings.

Note: You can use the Overlap feature for both Default and Custom headers. In order to know the difference between Default and Custom headers, you can refer to this article.

Creating a transparent header

Default header

If you’re using the default header for your website you should reduce the alpha for its background color, in order to do that:

1. From WordPress left menu go to Jupiter X > Customize > Header.

2. Go to Styles tab and customize the Container

Click on the background color option and reduce the alpha for the background by moving the slider to the left.

4. Close the options panel and Publish the changes.

Custom header

To make the custom header transparent, you must reduce its background alpha by editing it in Elementor.

1. From WordPress left menu go to Templates > Saved Templates.

2. Select your desired header template and modify it via Elementor.

3. By choosing the header section, a panel will be shown on the left. select the Style tab.

4. Select a background color option and reduce its alpha by moving down the slider. that makes your header transparent. 

5. Customize your header and update the changes.

Did this answer your question?