transparent header

[Nicolas Glättli]

Hello Team
I purchased the complete pro theme and set different header images on all pages (only worked by set a “headercode with <img src=…”)
My site is https://www.ngsystems.ch
I set the option transparent header on the homepage.

What do I have to add to the custom CSS that all pages have a transparent header/Menu bar?

And is there a code that the top menu bar and the menu bar (with logo and menus) stay on top while scrolling the webpage?

Many thanks.

Nicolas

[Nicolas Glättli]

and on the smartphone the mobile menu links have an annoying offset! I have to fingertip a little bit above the links to open the right pages?

How do I solve this problem?

Thanks.

Nicolas

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.page .header, .single .header, .archive .header, .search .header { background-color:transparent !important; position:absolute !important;}

Regards,
Dave

[Nicolas Glättli]

Hi Dave

on the computer the menu now works as asked. But on the smartphone the background color of the “logo bar” is now transparent/white, but only on the inner pages and not on the home page?!

and how do I resolve the offset of the links in the menu bar on the smartphone (ex. when I click on the second menu link, it opens the third) ?

Many thanks.

Nicolas

[Nicolas Glättli]

Hi Dave

the offset problem was because of my big fingers and the small buttons…;-)

can you give me a workaround for the newly appearing wrong background color (transparent/white) on the smartphone behind the logo on the inner pages? (on the home page it’s the right color dark green?!)

Many thanks!

Nicolas

[Sonnal S Sinha]

Hi,

Kindly use this one:

@media screen and (max-width:479px) {
.page .header, .single .header, .archive .header, .search .header { background-color:#383939 !important;}
}

Regards,
Dave

[Nicolas Glättli]

Hi Dave
I succeeded by adding in css first your solution with transparent until 47.938em and then your solution with color #383939 apart 48em!
I have this numbers from the theme-responsive.css file from the theme.

Many thanks.

Nicolas

[Sonnal S Sinha]

Hi,

Kindly use this

@media screen and (min-width:480px) and (max-width:767px) {
.page .header, .single .header, .archive .header, .search .header { background-color:#383939 !important;}
}

Regards,
Dave

[Author]

Posts