Menu hover/submenu styling issue – black background should only appear for active/current page
Hello,
I need assistance with the website navigation menu styling.
Currently, the black background highlight appears not only on the active/current page (which is the desired behavior), but also whenever a menu item has a submenu or when the menu item is in its idle/default state.
What I want instead:
The black background highlight should appear ONLY for the currently selected/active page (for example, HOME when I am on the homepage).
Menu items that are not active should remain transparent/default in their idle state.
Simply having a submenu should NOT trigger the black background.
Hover behavior can remain separate if needed, but the persistent black background must be reserved only for the active menu item.
In short:
Active page = black background
Inactive menu items (including those with submenus) = no black background unless intentionally hovered
Please let me know how this can be adjusted.
Thank you.
PS, the domain is www.tokyoia.com
I need assistance with the website navigation menu styling.
Currently, the black background highlight appears not only on the active/current page (which is the desired behavior), but also whenever a menu item has a submenu or when the menu item is in its idle/default state.
What I want instead:
The black background highlight should appear ONLY for the currently selected/active page (for example, HOME when I am on the homepage).
Menu items that are not active should remain transparent/default in their idle state.
Simply having a submenu should NOT trigger the black background.
Hover behavior can remain separate if needed, but the persistent black background must be reserved only for the active menu item.
In short:
Active page = black background
Inactive menu items (including those with submenus) = no black background unless intentionally hovered
Please let me know how this can be adjusted.
Thank you.
PS, the domain is www.tokyoia.com
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
You can add an extra class 'force-transparent-menu-item' to this very menu item (the top one) and use this css definition in Appearance>>Additional CSS
What I want is something similar to this (attached), the black box should only appear on the page you are reading.
PS. Please understand that I am in no way criticizing everyone's work here, I just use this as a tool to help find a solution for the both of us fast
/* Strict version: turns off as soon as mouse leaves the parent item */
body.home #menu-item-15216:not(:hover),
body.home #menu-item-15216:not(:hover) > span.title {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-image: none !important;
outline: none !important;
box-shadow: none !important;
}
body.home #menu-item-15216:not(:hover)::before,
body.home #menu-item-15216:not(:hover)::after,
body.home #menu-item-15216:not(:hover) *::before,
body.home #menu-item-15216:not(:hover) *::after {
content: none !important;
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-color: transparent !important;
border-image: none !important;
outline: none !important;
box-shadow: none !important;
}
If it works for you - that's ok.
Would be cool to have wide fix, but it is what it is. Have a great day.