Archived topic
Site Header Background Color
6 replies · Started by MICHAEL on April 3, 2021
Hi. I'm using the Donate template from the site library. The site logo is now centered as are the menus and adjacent Donate button. I've changed background colors to add a blue tint to my menu bar fine. When I apply the same background color tint to the Site Header via the Elements > Page Headers > Site Header (tab) > Background color setting, the blue tint in the Site Header doesn't appear in my previewed page. What am I doing wrong? Thanks.
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Well, I've changed the design approach slightly... simply want to add a background gradient at like 15% at top of site header > 0% over bottom of the primary menu. I see some earlier tech support q's about adding some css, such as... but since I'm not a coder I don't know how to modify the below to be the gradient above. Suggestions?
.site-header {
background: linear-gradient(to right, red, blue);
}
And do I need to put anything anywhere else to access this code? Thx
Or I see in other earlier hope something like this:
.page-hero {
background: linear-gradient(180deg, rgba(0,0,0,0.3981967787114846) 0%, rgba(0,0,0,0) 35%);
}
Which to use? And should I put it in something like Simple CSS, or just he Additional CSS section of the Customize UI?
Hi Michael,
Which to use? And should I put it in something like Simple CSS, or just he Additional CSS section of the Customize UI?
It depends on how you want this CSS to behave:
If you want this to apply conditionally depending on page or post, you may have to use a Hook Element and wrap your CSS with <style></style> tag with display rule set to where you want this applied.
Now if its something you want to apply on all header elements, you can simply add it on Additional CSS of the Customize UI.
For a novice like me, only your last paragraph makes sense. Fortunately, that is the plan. :) Thanks.
No problem. :)
