How can I have overlay header only for home page?

The general approach here is that first, we set our global header in the Customizer panel. This is the header that will be the default header for all of the pages.

Let say a simple header layout, with a simple blue background and the Overlay Header options turned OFF:

Now we want to have another transparent header that overlays on its bottom section. For example, we want to have this kind of header only on the home page.
Let assume that we have a big top section on our home page with a background image and we like to have the overlay header on top of that. Currently, with the normal settings that we set in the Customizer, it looks something like this:

We do this in the Page Options section of the home page.
To access the Page Options section, open your page in the WordPress default editions and scroll to the bottom. There you can see the Page Options section.

There, go to the Header Setting and choose your Header Menu Layout and then from the following options, then set the Enable Overlay Header option to Yes and set the Header Background Color to a transparent value.

The final result will look something like this:

Next, you can change the logo too. Let say a white logo for the home page, because it has an image on the background and then a normal black logo for other pages. This can be done using the Page Options too.

Just scroll down from where you set the Header Background Color and enable the Custom Page Logo option and set the logo you like from the following option.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us