Creating a transparent header

Updated on September 12, 2022

How to make the 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.

The transparent header can be made in both, custom and default headers.

Transparent Header for Custom header template:

1. Open your header template and find the section you want to overlap

2. In the style tab set transparent or semi-transparent color

3. Next open the Advanced tab and set the negative margin-bottom to the same section

4. Save your changes and publish

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 for the 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 and enable Overlap header

2. Then Go to the Styles tab open the Container and reduce the alpha for the background

4. Publish your changes you are done

Did this answer your question?