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
