I want the MAIN ITEM 1 to have an active state if SUB1 or SUB2 is selected. In other words: if I visit a subpage, I want the parent page to stay highlighted in the menu. This seems not to be the case. Isn’t this a very basic feature? How can I get this to work? Any help appreciated…
Just a note that I tried to see what was possible here, and couldn’t see anything obvious in editor. My parent pages were ‘Subpage Titles’, not actual page links. Assuming yours may be same. But changing the ‘Menu Items > Current Page’ styling doesn’t affect these parent pages (guessing it might if those were actual page links and you were on their pages).
But in glancing at the markup in front-end, I did come up with a style that ‘might’ work (did for me), as follows. This is prob not going to be officially supported by Wix (using the data attribute), but if it’s something non-critical like this, the worst that would happen is it might fail at some point if they change things around. Also ‘:has’ pseudo selector is a bit newer, but has pretty widespread support on most modern browsers.
/* Change parent menu item color if child is current page */
.horizontal-menu__submenu-title:has(li[data-is-current=“true”]) .horizontal-menu__item-label {
color: red;
}
That seems to be a good option but I couldn’t get it to work. Did you placed this markup in the global.css or somewhere else? Thanks in advance for your support.
Yeah, all CSS goes in global.css in Wix. Are your top-level ‘parent’ menu items Submenu Titles (i.e., they are just titles for the submenu, not links themselves)? Or are they actual page links (clicking them takes you to a different/specific page than children)?
The code I supplied is for parent menu items that are Submenu Titles, which is how we use them. If yours are standard page links, you can try the following (haven’t tested).
/* Change parent menu item color if child is current page */
.horizontal-menu__item:has(li[data-is-current=“true”]) .horizontal-menu__item-label {
color: red;
}
And this might be a bit more advanced, but when we apply colors in CSS we try to use the Wix variables setup by our theme styles so they would pickup any changes we make to global colors, like most other elements. But you have to kind of dig in a front-end inspector to figure out what those are. So when setting a color we might use: color: rgb(var(--color_24)); which would correspond with one of the 25 colors you can set in your Site Styles.
Ahh, you’re trying to get a bottom border not change the color of the menu item label. For that, you can try the following style. And again, this goes outside of Wix ‘official’ styling guidelines, so there may come a time where it stops working if they change the way the menus are formatted or something.
/* Add underline to parent menu item when child page is current */
.horizontal-menu__submenu-title:has(li[data-is-current=“true”]) > a {
border-bottom: 2px solid #F3A4C8 !important;
}
And if you ever did want to change the menu label color, the first style I posted would work if made a bit more ‘forceful’ due to specificity conflict with Wix styling. So to override, you would just change the color declaration on that to: color: red !important;
