Hi,
I am using the free Tessaract theme on my site www.backpacktravelpro.com.
Some of my header menu items have sub-menu items (e.g., “Routes”). When the sub-menu items are revealed by hovering over the main menu item the background colour and opacity are perfect for me. However when I then hover over a sub-menu item, its background colour and opacity changes – I do not want it to do this.
There is no way to change this using the front-end theme customiser. Are there some lines of CSS code that I can use with your CSS plugin to fix this please?
Many thanks in advance!
Graham
Tesseract theme – change header sub-menu item hover background colour with CSS
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Graham.
I’d like to help you with this issue. Unfortunately, this is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.
Hi Alex,
Thanks for the reply. I finally managed to solve this myself, and thought it would be best to share how as I’m sure others are being frustrated by this issue too.
I installed a plugin that allows me to edit CSS. I am using ‘Simple Custom CSS’.
Then I entered the following two lines into the CSS editor:
.top-navigation li ul.sub-menu li a:hover{ background:rgba(229,229,229,1);}
.top-navigation li ul.sub-menu li a{ background:rgba(229,229,229,1);}
The first line sets the background colour of the sub-menu items when the mouse is hovering over them, and the second line sets the background colour of the sub-menu items when the mouse is not hovering. The first three numbers are the RGB colour code for the colour you want, the final number is the opacity. Opacity is a number between 0 and 1.
If you have the hex code of the colour you want, you can get the RGB equivalent from a website like this one: https://www.webpagefx.com/web-design/hex-to-rgb/
Graham
Hi Graham,
I’m glad you were able to resolve this issue and thank you for sharing your solution. I’m sorry I wasn’t able to be of assistance this time. Please be sure to post another thread if you have any other questions.