-
Posts
-
Hi,
I would like to change the color of the font on the mobile menu to red (#ff0000) when you hover on it. I’ve been searching the enfold support forum and tried several codes but none seems to work.
How can I change the hover color of the font on the mobile menu?
Best regards,
zizibe1Hey zizibe1,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
#av-burger-menu-ul .avia-menu-text:hover { color:red !important; }Best regards,
RikardHi Rikard,
Thank you very much for your reply.
After I added your code to the Quick CSS, the font colors on the mobile menu are:
– white font: when you don’t hover near a menu item
– grey font: when you hover near a menu item
– red font: when you hover on a menu itemBut I would like to have the font colors like this:
Mobile menu (slightly transparent black background):
– white font: when you don’t hover near a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right onDesktop menu (white background):
– black font: when you don’t hover near a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right onException: The Page “Home” (frontpage) is not listed in the menu. So when you’re on the page “Home”, logically, the font color of all menu items should be white (mobile) resp. black (desktop).
By the way, is “red” exactly the same color as “#ff0000”?
Best regards,
zizibe1Hi,
Thanks for the feedback. Please try this instead:
#av-burger-menu-ul .current-menu-item { color:red !important; }Best regards,
RikardHi Rikard,
Thank you for your reply.
Unfortunately, the code doesn’t work. Now, the font colors on the mobile menu are:
– white font: when you don’t hover near a menu item
– grey font: when you hover near or on a menu itemThat’s correct so far. But the font color of the menu item of the page you’re right on should be red.
Please don’t forget to tell me also how I can modify the desktop menu (white background):
– black font: when you don’t hover near a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right onPlease answer also the question of my last post:
Is “red” exactly the same color as “#ff0000”?Thank you very much for your efforts.
Best regards,
zizibe1Hi,
The login token seems to have expired, please post a new one or admin login details in private.
Best regards,
RikardHi,
Where are you placing the CSS? Please try it at the very top of Quick CSS. Also, are you using the performance features of the theme while developing? If so then please turn that off as well, until you are done with the site.
Best regards,
RikardHi Rikard,
Thank you for your reply.
I went to Enfold Child > Performance > File Compression > “Disable – no CSS file merging and compression” and “Disable – no Javascript file merging and compression” > “Safe all changes”.
Then I added the following code at the very top of Quick CSS and clicked “Safe all changes”:
#av-burger-menu-ul .current-menu-item { color:red !important; }Then I went back to Enfold Child > Performance > File Compression > “Enable – merge and compress all theme CSS files” and “Enable – merge and compress all theme javascript files” > “Safe all changes”.
Then I went to the page “Portfolio” of my website, pressed shift and the reload button of Chrome and opened the mobile menu, but unfortunately, the font color of the menu item of the page I’m right on (“Portfolio”) still isn’t red.
Best regards,
zizibe1Hi,
Thanks for the feedback. Please try this CSS instead:
.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.current-menu-item .avia-menu-text { color:red !important; }Best regards,
RikardHi Rikard,
Great. Now, the mobile menu is exactly as I wanted it to be. Thank you very much for your support.
I would like to modify my desktop menu (white background) analogue to this:
– black font: when you don’t hover on a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right on when you don’t hover on it
– dark red font: the menu item of the page you’re right on when you hover on titI could modify the desktop menu in Enfold Child > Advanced Styling > select Main Menu Links. But I didn’t find a way to modify the last point: “dark red font: the menu item of the page you’re right on when you hover on tit”.
Should I start a new topic?
PS: Is “red” exactly the same color as “#ff0000”?
Best regards,
zizibe1Hi,
Sorry for the late reply, I have taken a look at your site but it seems you are using the mobile menu “burger” for both desktop and mobile, do you wish for the same menu to be different colors on different screen sizes?
What screen size do you consider the beginning of “desktop”?Best regards,
MikeHi Mike,
Thank you for your reply.
Yes, currently I chose “Display as icon” for desktop because I opened a second topic with the title “Burger icon hover color”. This topic still is pending too. As soon as this issue is solved, I’ll choose “Display as text” for desktop.
When I’ll choose “Display as text” for desktop, the font colors of the menu always should be the same – for every screen size. No changes will be necessary here.
But I have a wish concerning the font color of the desktop menu when I’ll chose “Display as text”. The current colors are:
– black font: when you don’t hover on a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right on when you don’t hover on itThat’s okay. I want to keep it this way.
But I would like to complete it like this:
– dark red font: the menu item of the page you’re right on when you hover on it
In the mobile menu, it’s already like this. That’s why I want to have it for the desktop menu too when I’ll choose “Display as text” .
How can I achieve this?
Best regards,
zizibe1Hi,
When your desktop menu is activated you can change the menu colors in Enfold Theme Options > Advanced Styling or we can assist with css. But we will need for you to activate the desktop menu, I know you said there is another issue being worked on, so please let us know when you are ready for this.Best regards,
MikeHi Mike,
The issue concerning the other topic with the title “Burger icon hover color” is solved. So I’ve activated the desktop menu. Now, I’m ready for this topic.
Back to my concern:
I have a wish concerning the font color of the desktop menu when I’ll chose “Display as text”. The current colors are:
– black font: when you don’t hover on a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right on when you don’t hover on itThat’s okay. I want to keep it this way.
But I would like to complete it like this:
– dark red font: the menu item of the page you’re right on when you hover on it
In the mobile menu, it’s already like this. That’s why I want to have it for the desktop menu too when I’ll choose “Display as text” .
How can I achieve this?
I didn’t find a way to adjust this in Enfold Theme Options > Advanced Styling. Therefore it would be great, if you could assist with css.
Best regards,
zizibe1Hi,
Thanks for the login, I added this code in the General Styling > Quick CSS field:#top #header .av-main-nav > li.current-menu-item:hover a span.avia-menu-text { color: #ff0000 !important; }Please clear your browser cache and check.
Best regards,
Mikefor the hamburger menu : doesn’t he like to have the current page highlighted in red?
#av-burger-menu-ul :not(.active-parent-item) .current-menu-item > a .avia-menu-text { color: red !important; }Hi Mike,
Thank you for your reply.
The code works, but I had to change the color to #9a2912 (“dark red”) because my wish for the desktop menu was:
– black font: when you don’t hover on a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right on when you don’t hover on it
– dark red font: the menu item of the page you’re right on when you hover on itNow, there’s the following issue: When you move the cursor away from the menu item, for a brief moment, it changes its font color from “dark red” to grey and only then to red. But the menu item should change its font color immediately from “dark red” to red.
How can I fix this?
Best regards,
zizibe1Hi,
@Guenni007, thanks for the suggestion, his current menu items were already red in mobile and desktop, he just doesn’t have a homepage menu item.
Nice use of “:not()”Best regards,
MikeHi Mike,
I haven’t heard back from you. Could you please help me to solve my issue (see my previous reply #990923)?
Best regards,
zizibe1Hi,
Sorry about that, I didn’t see that message.
I added this css to correct:/* font color of the menu item of the current page */ #top #header .av-main-nav > li.current-menu-item a span.avia-menu-text { color: #ff0000 !important; }now it goes from dark red to red on mouse out.
Please clear your browser cache and check.Best regards,
MikeHi,
Unless there is anything else we can assist with on this issue, shall we close this then?Best regards,
MikeHi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)Best regards,
Mike
- The topic ‘Hover color of the font on the mobile menu’ is closed to new replies.