Using a text link as a 'Close' icon for Overlay Menu

[MWPA]

I’d like to use a simple text link (e.g. “Close”> Sluit in Dutch) to close my Overlay Menu instead of an icon. I know it’s possible to choose “Text” as the icon type, but then I also need to position it manually.

The available positioning options don’t align with the custom grid layout I’m using for my menu, which makes it hard to place the close text exactly where I want it.

Here’s the website I’m working on – click on Menu to see what I mean:

https://dev.vandersalm-architecten.nl/

Is there a way to use a text-based close link that integrates better with my custom layout?

Thanks in advance!

[arminunruh]

Hey there. You will need to use custom CSS to do this. If we look at the Chrome inspector and look at how your menu item is positioned, we see this:

we find its this:
eft: calc(16px + (100% - 32px) / 8 * 4 + 6px);

so add a class to ur Sluit button:

myclose

.myclose{
    position: absolute!important;
    left: calc(16px + (100% - 32px) / 8 * 4 + 6px)!important;
}

[MWPA]

Hi Armin, thanks for your response!

I understand that with your solution I can reposition the standard "close" text button. However, I’m now working with a custom text-based menu and I would like to use a text link (e.g. "Sluit") to close the overlay menu, instead of an icon.

I’m unsure how to properly link this text to the closing functionality of the overlay.
Could you please clarify:

• Is there a specific class or method that can be used to trigger the overlay close functionality when clicking on a text link like “Sluit”?
• If so, could you provide guidance on how to implement this, so the text link behaves just like the existing close icon (without needing additional positioning adjustments)?

Thank you in advance for your help!

[arminunruh]

Hey, but when I click on the Sluit button, the overlay closes.

[MWPA]

Yes, at the moment it's just a link to the homepage, so it doesn’t actually trigger the overlay to close. What I’m looking for is functionality that simply closes the overlay and returns the user to the previous page, regardless of where they came from.

[arminunruh]

ah ok
and why dont u use x close icon: icon type of text?

another thing you can do:
right click the column of the text. and give it the class:

overlay-close

now clicking it will close the overlay

[MWPA]

Thanks gain @arminunruh

If I use the standard text option, I need to manually adjust the positioning to make it fit within my text-based menu layout.

When I add the overlay-close class to the column, it works – but then the entire column becomes a clickable close area, which isn’t what I want.

I tried adding the class only to the link, like this:

<a href="#" class="overlay-close">Sluit</a>

But when I do that, the link disappears entirely.

Do you know why this might be happening, and how I can apply the overlay-close functionality only to the Sluit text link?

[arminunruh]

ah its because overlay-close class also uses the standard overlay close icon css

pls update lay theme now to version 8.6.3

then use this class instead:

user-overlay-close

this should work better

[MWPA]

Rock solid, thanks so much Armin!

[arminunruh]

im happy it works for u!