mega menu current page link underline

Site URL: http://www.mondouxrollins.com

Hi folks. I have a few CSS tweaks working fine... but just spotted one missing piece to deal with.

How do I underline the active page link, when it is a link in the mega menu? The main navigation links work like that, so I should follow suit with the mega-menu (which is a sheet of links under mondouxrollins.com/solutions).

This is what I have so far:

/* footer links remove underline */
footer a {
    text-decoration: none !important;
}

/* footer links hover color */
footer.sections a:hover {
    color: #52C2C8 !important;
}

/* main navigation links hover color */
.header-nav-item a:hover {
    color: #52C2C8 !important;
    transition-duration: 0.4s;
}

/* mega menu links remove underline */
.show-mega-menu .sqs-block-html a {
    text-decoration: none;
}

/* mega menu links hover colour */
.show-mega-menu .sqs-block-html a:hover {
    color: #52C2C8;
}

You can see I've already made two mega-menu tweaks. I thought the following would work, but it's not. Am I getting close? 🙂

/* mega menu links current page underline */
.show-mega-menu .sqs-block-html a:visited {
    text-decoration-line: underline;
}

You mean

for example when users are on this page 

https://www.mondouxrollins.com/executive-search-and-recruitment

will underline this item, like this?

Correct, although I'm not getting the underlines on that mega sheet of links, neither with Safari nor Chrome on my Mac. Not sure how you are seeing them.

Looking over my code again, I suppose I am literally removing underlines in that mega menu... though I understood that to be just the initial state of the link. The underline to highlight the current page link specifically... I'm not seeing what you are showing me above.

Emailed the mega menu plugin creator and got this:

Unfortunately this isn't something that is built into the functionality of the plugin currently and isn't something that would be achievable with CSS alone. In the main navigation the active items gets a class added to them, and then we use CSS to display the underline. Whereas in your Mega Menu section these are text blocks with links and that active class isn't added automatically. 

My screenshot, I used code to add it.

OK thanks, let me know if you'd like to share the code and how to implement it. Nice to know it's possible 🙂

It is a bit manually, you will need to add code to all pages where you want underline appears

For example this page: https://www.mondouxrollins.com/executive-search-and-recruitment

You need to add this code to Page Header

<style>
  section.wm-mega-menu-item [href="/executive-search-and-recruitment"] {
    background-image: linear-gradient(#52c2c8, #52c2c8);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 calc(100% - 0.1em);
}
</style>

With this page, you need to add this code to Page Header: https://www.mondouxrollins.com/interim-and-fractional-recruitment

<style>
    section.wm-mega-menu-item [href="/interim-and-fractional-recruitment"] {
    background-image: linear-gradient(#52c2c8, #52c2c8);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 calc(100% - 0.1em);
}
</style>

I have it working now. Thanks very much 🙂 I appreciate your time on this.