X Theme – Transparent Fixed Top Header (Solid Background on Scroll)

As of X Theme version 6.1.3, there is still no option to have a fixed header on top of the hero image on the page and change its background color to a solid or semi-transparent color as you scroll through the page.

As an alternative, you can do by doing the following:

Firstly, go to X > Theme Options > Header > Navbar – Navbar Position then set it to Fixed Top.

When you do this step, the header area will appear on it default location on the page and sit on top of the page as you scroll through.

By default, the inline navigation area will have a white background.

If you want it to display on top the hero image or the slider that sits below it and have a transparent background which changes to a solid background upon scrolling, add these codes in the Global CSS:

Then this code to the Global JS:

Share this Post

Leave a Reply

Your email address will not be published. Required fields are marked *