Sub menustyling

[yingfuli]

Hi,

On attached images you can see that the sub menu dropdown id different in two instances. Under ‘Vestigingen’ the menu dropdown is as I styled it in Pro Header: grey letters that turn red when hovered. Under ‘Groepslessen’ the lettering is red by default and hover action is rather strange. The site: http://fitklub.nl/new/groepslessen/

I reckon it has to with that ‘Vestigingen’ is a custom link menu item whereas ‘Groepslessen’ is a proper page in en of itself. Could you advise how to get both menu dropdowns the same?

[yingfuli]

Never mind this post. It seems to have resolved itself.

[yingfuli]

I was to soon, haha. It turns out that when I’m on the page ‘groepslessen’ the dropdown menu items are all red. Only when the dropdown menu is addressed from any other page does it behave like I set it up in Pro Header. Any suggestions as to why and how to fix it?

[christian]

Hey there,

It looks like you have this custom CSS

.hm8 .sub-menu .x-anchor[class*="active"] .x-anchor-text-primary {
    color: hsl(0,100%,50%);
}

Please change it to

.hm8 .sub-menu .x-anchor:hover .x-anchor-text-primary {
    color: hsl(0,100%,50%);
}

Hope that helps.

[yingfuli]

Nope, doesn’t do anything. Remains the same. I even removed that css altogether, still the same.

[yingfuli]

Also I just discovered that the main menu item ‘Groepslessen’ does not work on the iPad. It only shows the drop down when touched, not open the actual page it links to.

[paul.r]

Hi Ying,

To fix the color, you can add this in Custom CSS

body .hm8 .sub-menu .x-anchor[class*="active"] {
    background-color: hsl(0,0%,100%);
}

body .hm8 .sub-menu .x-anchor[class*="active"] .x-anchor-text-primary {
    color: rgba(0,0,0,0.35);
}

With regards to your menu in ipad, you need to double tap the menu to go to the actual page as there is no hover in ipad, the first touch is equivalent to hover. I suggest you activate sub indicator in your menu.

Thanks

[yingfuli]

Well, the code you gave doesn’t work. It seems like the setting for dropdowns becomes moot when having a page as top link. So I have removed the page and replaced it with a custom link. I do feel that this is a bug in the Pro Header set up.

[lely]

Hi There,

By default on this element, the main link with submenu is not clickable and will just reveal those submenus when click on mobile. We have plans on making just the sub indicator to open the submenu and make the main link clickable but we don’t have an ETA for this yet. We will let you know once we have an update. On dekstop, the main link with submenu should still work on click and just reveal the submenu on hover. If it’s not working that way can you set it as normal page so we can check? Give us credentials using secure note.

Regarding the link colors, this is what I am seeing right now: https://screencast-o-matic.com/watch/cbifhFlI0ahttps://screencast-o-matic.com/watch/cbifhFlI0a
On this page: http://fitklub.nl/new/groepslessen/, submenu hover color and the link Alle groepslessen default color is red. It is red because it’s the current page - the current active menu… Hover state and active state have the same font color as set on the interactive. On the homepage, all submenu links will be just red on hover. Did I missed something here? Please clarify.

[yingfuli]

Thanks for the clarification. I have replaced the main link with a custom link, so it works on iPad. The problem never appeared on desktop.

As for the colors: because in the meantime (I’m on a deadline here so can’t afford to wait each time I run into a problem) I changed the main link to a custom link the colors are now as they should be, so the submenu links are grey and turn red on hover. I think the problem arises when the main link is a regular page: when on that page i.e. that page is active it is red as I set it up but it also makes all submenu links ‘active and red’ in some way. Again, I feel this is a bug/glitch in Pro Header.

[lely]

Hi There,

You’re always welcome.

Regarding the colors, we do understand if you don’t have time but we need to check your setup showing the issue before we report this a bug/glitch. I made the same setup on my test site and I can’t duplicate the issue. So we need to check your settings or customization to see where this issue is coming from. See my testing here: https://screencast-o-matic.com/watch/cbiheMl2hj

[yingfuli]

Okay, point taken. I have changed it back to where it was: http://fitklub.nl/new/groepslessen/ and will leave it like this today.

Issue is back as expected.

[lely]

Hi Ying,

Thank you. I can see the issue now. This issue is because of the following JS code:
setInterval( function() { jQuery( '.current-menu-item a' ).each( function() { jQuery(this).addClass('x-interactive'); jQuery(this).parent().find('a:first-child > span > span').addClass('x-active'); } ); }, 300);
Please update this line jQuery( '.current-menu-item a' ).each( function() { to this jQuery( '.current-menu-item >a' ).each( function() {. I have added > so it will only add active status to current active page link and not to it’s submenu links too.

Hope this helps.

[yingfuli]

Great, that did it! Thanks.

[nabeel]

Glad we could help.

Cheers!