Ambiance Pro: site-header area blank on smaller screens

[addiesgram]

The site-header area which contains the nav menu and site-title on gray background does not display on smaller screens -- instead there is just white space. This is true for iPhone and iPad (both landscape and portrait). Thus far I haven't edited media query codes or any of the theme default colors -- what do I need to do to have the site-header area show on all screen sizes?

* I should add -- the gray site-header area with menu and site-title does show on pages, just not on the single post I linked to.

https://inkindwebdesign.com/newpost

[andytc]

OK , i've had a look on an actual device - iPhone , yes it's not showing correctly -

Reason - This CSS entry created by Genesis Design Palette Pro

body.gppro-custom.single-post .site-header {
    background-color: transparent;
}

which is overriding this -

body.gppro-custom .site-header {
    background-color: #000;
    background-color: rgba(0,0,0,0.5);
}

remove the background-color: transparent; entry completely

[addiesgram]

Thanks Andy, can you help me understand this -- in style.css I do find the entry

single-post .site-header {
background-color: transparent;
} 

but I do not find

body.gppro-custom.single-post .site-header {
    background-color: transparent;
}

I also do not see any indication within the Design Palette Pro plugin that I can make anything transparent -- and certainly I didn't knowingly make anything transparent, either using the plugin or going straight to style.css.

Does Design Palette Pro - merely installing it - mean css changes can be made by the plugin? I've used gppro on all my sites and I've never seen this happen before.

[addiesgram]

Within style.css I have removed the transparent css from site-header on posts, and I now see the gray header on my iPhone. However, the gray site-header area is disappearing as I scroll up the post on desktop. Not sure how to fix this one : (

[andytc]

You'll have to dig around in the customiser and design pallette pro , I've never used it so can't help with that. it's this line causing problems -

body.gppro-custom.single-post .site-header {
    background-color: transparent;
}

On scrolling down the site-header gets a '.shrink' class added with JS , you can't see it because it's white text on white background, because of that CSS entry - find it , delete it , review.

[addiesgram]

andytc, thanks for your time -- actually the single-post background color is suppposed to be transparent, as it is in the demo version for a single post. But it *isn't* supposed to stay transparent on scrolling (hence the white text on white background). In any event, deactivating the Design Palette Pro restored the original customizing so I'll have to leave it disabled. Bummer. I've never had the gppro plugin cause this kind of issue.

Thanks again for offering time and help, I appreciate it. Take care and stay safe out there.

[Author]

Posts