I am using full screen rows on the homepage, and the transparent header persists when I call the off canvas/full screen menu. But when I call the menu from one of the interior pages (Build/Design/Team/Inquiry) the header is a white bar. Is there a way to make that transparent as well, or at least a way to force it black to match the off-canvas background? I have tried using Custom Header Scheme, but it seems to ignore the off canvas header background color.
This actually doesn't work as intended. You are correct in that the logo no longer shows up, but what do I need to set so that it shows up both on normal page headers AND with Off Canvas? Can I call the Light Logo when using Off Canvas everytime?
Never mind, I fixed it. You had min-width, instead of max-width in the CSS.
But now, on Desktop there is no padding on the interior pages. /build, /design, etc.
Since we are now Forcing transparency, the interior pages don't have that built in header padding on Desktop. Mobile is fine, most likely because of the CSS you added. How do I add back in the header padding on a transparent header page? Not on Home, that is perfect, but the other pages.
I have attached what that CSS code is doing to the Home Page on Desktop. Can we make that CSS NOT effect Full screen Rows? (That's how the home page is built)
I have commented that CSS out until we can fix that.
Mobile only issue:
I am using full screen rows on the homepage, and the transparent header persists when I call the off canvas/full screen menu. But when I call the menu from one of the interior pages (Build/Design/Team/Inquiry) the header is a white bar. Is there a way to make that transparent as well, or at least a way to force it black to match the off-canvas background? I have tried using Custom Header Scheme, but it seems to ignore the off canvas header background color.
Hi Thomas,
See attached screenshot.
When we open the off canvas menu on the team area we do not get a white bar at the top.
Did you manage to work this out because we do not see this effect?
Please confirm.
Here is a screen recording. I cleared Safari Cache on an iPhone 8 running iOS 13
Hi Thomas,
To make the adjustment, add the custom css below in Salient > General settings > CSS/Script related:
body #header-outer, body[data-header-color="dark"] #header-outer { background-color: rgba(255, 255, 255, 0) !important; }Note. changing the header from white (with dark logo) to transparent (dark logo won't show) at off canvas.
Hope this helps.
Kind regards,
thanks I will try this.
Do I need to do a media query since this issue is only on mobile?
This actually doesn't work as intended. You are correct in that the logo no longer shows up, but what do I need to set so that it shows up both on normal page headers AND with Off Canvas? Can I call the Light Logo when using Off Canvas everytime?
Thanks Andrew.
Andrew, this is all looking good, except now on Desktop, there is a big white Header space, that is not transparent.
Never mind, I fixed it. You had min-width, instead of max-width in the CSS.
But now, on Desktop there is no padding on the interior pages. /build, /design, etc.
Since we are now Forcing transparency, the interior pages don't have that built in header padding on Desktop. Mobile is fine, most likely because of the CSS you added. How do I add back in the header padding on a transparent header page? Not on Home, that is perfect, but the other pages.
Thanks!
I have attached what that CSS code is doing to the Home Page on Desktop. Can we make that CSS NOT effect Full screen Rows? (That's how the home page is built)
I have commented that CSS out until we can fix that.
Also, the menu item "Inquiry" is getting chopped off. See attached. I tried:
.menu-wrap {
overflow: visible;
}
But that didn't fix it. Thanks!