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.