Hello,
First of all, thanks to SiteOrigin for all the wonderful tools you provide. :)
I created a dummy site to try out some designs, widgets etc and am now recreating the final version on a different domain/server.
My problem is that the top menu items backgrounds get filled now, whereas on the test site they are transparent and fade into the chosen color when hovering over them, like they should.
The environments are to my knowledge very similar, WP 4.7.2, exactly the same plugins/versions, same settings under appearance, pages, posts etc. I have also tried to find discrepancies in the code but without success thus far.
This is the test version with the correct behaviour:
http://chronberg.com/temp/
Here is the version I’m currently working on, with the menu problem:
Any suggestions, tips or hints are very welcome.
Thanks in advance!
Hi Per,
I just had a quick look at your websites. Did you manage to resolve this issue? I ask as I can’t seem to see a difference in the menus.
For reference, here’s a GIF of me viewing the temp site:
Here’s a GIF of me viewing the new site:
Hello Alex,
Thank you very much for taking a look. Yes, I managed to solve it.
The way I did it was by putting in some additional CSS-code, forcing it to work, se below.
.main-navigation ul li:hover > a {
background: #930000 !important;
color: #FFFFFF !important;
}
Although I don’t find the solution very logical, since the code to my understanding doesn’t make the background transparent. The way I see it, it just alters the hover state values.
When removing the code it still works (!), and I did no other changes after the fact. Maybe it triggered something. I’m very much a newbie at these things as you understand. Well, I let it be like this for the moment, since it’s working the way I want.
Big thanks for the great support and this forum. Most of my stumblings have been resolved just by searching the posts here. Will definitely check out your premium products if I do more web related work.
Have a good one!
Hi Per,
By default, the menu items are transparent. Your CSS is adding a background color to the menu item (on hover) which allows for the effect to work. I’m unsure why it previously didn’t work but it’s not something we’ve come across before. If it happens again, let me know and I’ll work out why it’s not working.
Thank you for the kind words! :)