-
Posts
-
Hi,
I´ve added the following code in order to make the background of the main menu items hover colour white and the text change to green:
.main_menu ul:first-child > li > a:hover {color: #56882d!important;background-color:
white!important; border-radius: 15px; }
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #56882d!important; background-color: white!important;
opacity: 1;border-radius: 15px;}
}However when I move the mouse down to the sub-menu items the white background around the main menu item disappears. Could you provide me with the code to be able to keep the white background around the main-menu item when hovering over one of the menu´s sub-menu items?
Many thanks
Hey ProTravelGolf,
Thank you for using Enfold.
Where can we see the issue? Instead of adding that modification, try to alter the “Main Menu Links” style in the Enfold > Advanced Styling panel. Enable the “Apply only to mouse hover state” or “Apply only to active state” options.
Best regards,
IsmaelHi,
Did you try to remove the css modifications? I think that’s why the sub menu container is becoming white.
Please post the login details in the private field if the issue persists after removing the css modifications.Best regards,
IsmaelHi,
Thanks for the update.
Yes, I meant the WordPress login details. Please place it in the private field.
You can also create a login token. Just follow these steps:- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
Best regards,
IsmaelHi,
Thanks for the update. I can’t reproduce the issue though. Where can I see the issue? I’ve tried it on a lot of pages and they’re all the same. The sub menu items turn green on hover.
Best regards,
IsmaelHi,
Thanks for the update.
I can now see that the border radius changes when you move down the sub menu items. Please look for this css code.
.main_menu ul:first-child > li > a:hover { color: #56882d!important; background-color: white!important; border-radius: 15px; }Move the hover state to the list items instead of the link.
.main_menu ul:first-child > li:hover > a { color: #56882d!important; background-color: white!important; border-radius: 15px; }It’s inside this particular css media query.
@media only screen and (min-device-width: 990px) }Best regards,
IsmaelHi,
Adjust the viewport value from 990px to 989px or 789px. Let us know if that helps.
@media only screen and (min-device-width: 789px) {Best regards,
IsmaelHi,
You can try these css codes.
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li > a { color: #ffffff !important; } #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li:hover > a { color: #56882d!important; background-color: rgba(255,255,255,0.8)!important; border-radius: 15px; }The login token has already expired so I can’t get in the dashboard.
Best regards,
IsmaelHi,
Thanks for the update. I’ve added the necessary css codes to adjust the color of the mobile menu items.
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li > a { color: #ffffff !important; } #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li:hover > a { color: #56882d!important; background-color: rgba(255,255,255,0.8)!important; border-radius: 15px; } #top #wrap_all .header_color .main_menu #av-burger-menu-ul > li.current-menu-item > a, #top #wrap_all .header_color .main_menu #av-burger-menu-ul > li.current_page_item > a { color: #56882d!important; background-color: white!important; opacity: 1; border-radius: 15px; }Best regards,
IsmaelHi,
Thanks for the update.
This is what I see on iPad landscape view.
Screenshot: https://imgur.com/a/94Bln6u
What is the actual model/version of your iPad device?
Best regards,
IsmaelHi,
Yes most probably a 6 years old, does have issues with the renderings and the update
Best regards,
BasilisHi,
Thanks for the update.
Is it an iPad Mini? The mobile menu is supposed to display on that device. Please try this css code.
@media only screen and (max-width: 1024px) and (min-width: 768px) { .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container { height: 90px; line-height: 90px; } .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none; } .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special { display: block; } }Don’t forget to purge the cache prior to checking the page.
Best regards,
IsmaelIsmael,
No they are both ipads of the original size. The old one is an ipad 2 and the new one is around the 10inch screen size (same as the ipad 2 more or less).
Thank you for your code but all this has done is made the burger menu appear for the ipad landscape mode (but without the white background like in portrait mode) I´d like the menu to show as it does on larger screens on ipad landscape mode and not the burger menu.
However, now I have played around with it and finally got it working perfectly. It would appear that there is a difference between
@media only screen and (min-width: 990px) and @media only screen and (min-device-width: 990px) {
with just the word device changing things? I now just have the code:
@media only screen and (min-width: 990px)
and it´s got everything within those brackets working perfectly for all screen sizes not using the burger menu!
Thank you for your support!! You can close this thread now!
Thank you again!
- The topic ‘Hover colour on main menu loses colour when moving mouse down to sub-menu items’ is closed to new replies.