Archived topic
Site Header + primary menu merged gradient background
9 replies · Started by MICHAEL on April 12, 2021
Hi. I want a gradient that I set up from https://cssgradient.io/ to appear in the background of my combined site header and primary menu area... on all pages.
I am not a coder. But based on some earlier advice here, I added the following CSS:
.page-hero {
background: linear-gradient(180deg, rgba(0,0,0,0.7987570028011204) 0%, rgba(0,0,0,0.5046393557422969) 65%, rgba(0,0,0,0) 100%);
}
It's not working. :) As you can see by going to https://whatcommilliontrees.org there is only a 40% solid background that I had turned on previous in the Page Header Element. What is wrong?
Also, where do I control the height of the Primary menu background area? The Layout > Primary Navigation > Menu Height Control control has virtually no impact, like something else is overriding it.
Thanks.
Hi Michael,
Try this instead:
.header-wrap {
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}For the other question, adjust the primary navigation menu item height:
https://www.screencast.com/t/kAiQ3pvrVR
Let me know :)
Thanks... the gradient is now solved.
Regarding the menu height, when I slide the exact same Menu Item Height slider you did in the clip you provided, it doesn't change the height like you clip shows... not in the adjacent preview or in the published result! Very puzzling. Any ideas why I'm getting different adjustment results than you? Thx.
Hum, that's odd...
Could you try to clear cache and disable cache plugin, then try it again?
Let me know :)
I'm confused. My web hosting account has no server cache. My browser cache was cleared. I have no cache plugin installed. What else is there? ;)
I tried again, it works still :P
Could you set the menu item height to 100px instead of 40px, and save it.
Then go to a new browser or incognito window, to check if the change has been saved.
Let me know :)
Oh, I see what's up now. Good suggestion. Major height increases (such as 100 or more) DO work, but I was trying to narrow the height a bit from 40, which does not work. Is there some reason 40 is the lowest threshold?
Ah it's because you have an empty paragraph under the donate button, which has a 35px bottom margin.
https://www.screencast.com/t/jwtZZMhy
Just remove it, the issue should be gone :)
Good catch! Thanks!
No problem :)
