Are transparent sticky headers possible in this theme?

This topic has 6 replies, 3 voices, and was last updated 2 years, 2 months ago by Sakin.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
September 2, 2022 at 11:34 pm #310355

bfindeisen
Participant

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.

September 3, 2022 at 2:24 am #310375

tikaram
Participant

@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

September 6, 2022 at 2:49 pm #310491

bfindeisen
Participant

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

September 6, 2022 at 7:49 pm #310497

bfindeisen
Participant

https://fairleadrealty.com/blog/

Thanks again!

September 7, 2022 at 2:15 am #310541
tikaram
Participant
@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
September 7, 2022 at 10:36 am #310601

bfindeisen
Participant

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.

September 7, 2022 at 7:15 pm #310622

Sakin
Keymaster

@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