[bfindeisen]

As the title says, I am wondering if it is possible to add a transparent sticky header to my page.  I want the featured image to be seen underneath the main header.

[tikaram]

@bfindeisen : For sticky header Please download and install  our free Plugin Catch Sticky Menu
After Activating the plugin  Go to => Dashboard => Catch Sticky Menu => Insert Desktop Menu Selector and Mobile Menu Selector

The selectors are either class or id of the header that can be found by inspecting your site. If you have difficulty finding the header class or id Please post in your site URL. I will check your site and provide you the required class or id.

For Transparent header please post in your site URL I will provide you the required additional css.

Regards,
Tikaram

[bfindeisen]

Thank you!  I will reply when I have completed the base design.

[bfindeisen]

https://fairleadrealty.com/blog/

 

Thanks again!

[tikaram]

@bfindeisen :For Catch Sticky Menu Desktop Menu Selector and Mobile Menu Selector  you may add the following as the selector

.wp-block-main-header

To make the header transparent please add the following additional css and let me know.

.wp-block-main-header {
  position: absolute;
  background: transparent;
  top: 0;
  width: 100%;
  z-index: 9;
}

Regards,
Tikaram

[bfindeisen]

Hi Tikaram,

I am just trying to get the transparent header working first, and copy and pasted the code from above in the Additional CSS section in the header settings, but no change seems to have happened.

[Sakin]

@bfindeisen: I see that you have added CSS in the “Additional CSS class(es)” section. You need to add it in “Appearance => Customize => Additional CSS” box.

[Author]

Posts