Overlay Menu Closing Issue

[janawodicka]

Hello!

I’ve created a menu using the overlay feature, but I’ve encountered an issue. Currently, I need to leave a space between the menu items and the close (X) button. Without this space, clicking on a menu item unintentionally closes the menu, likely due to a collision with the close button’s area.
Is there a way to resolve this so the menu items can be closer to the button without triggering the close action?

Maybe two small questions in addition to that:

1. I understand that the menu items are formatted as hyperlinks (with the specific color and underline that i customized). Is there any way to bypass this in the overlay?
2. And is it possible to apply different text formats within the same text box and even within a single line? For example, if I want three words in a line to be a bit bolder, my problem is, that the entire text box switches to bold instead. Can this be adjusted?

Thank you in advance for your help!

Best regards,
Jana

[arminunruh]

whats the link to your website?

clicking any link inside a page overlay will close that page overlay!
cause the link will load a new page in the page underneath

[janawodicka]

ah i think that's a misunderstanding. you can check it out here: https://kunst.uni-koeln.de/carelab/

I just mean that the page doesn't load, but instead when you click the first two menu items it simply closes the overlay without further action bc it seems to be too close to the x-closing-icon.

[felix_rabe]

the x buttons clickable area (100px padding) is overlaying the menu points.

@janawodicka you can optimize these spaces around the x icon in the overlay options. its "Close-Icon Space-Top (Desktop)" etc.

And then I would recommend to optimize the spaces above your menu points, right now you make the space with empty <p> tags, like blank rows. it will be easier to create this by adjusting the borders of the overlay.

[arminunruh]

oh i missed your other questions:

I understand that the menu items are formatted as hyperlinks (with the specific color and underline that i customized). Is there any way to bypass this in the overlay?

when an overlay is open, the body tag has a class of "lay-overlay-open"
so you could use this to write css

body.lay-overlay-open .desktop-nav a{
color: pink!important;
}

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

you can learn more about how to find the css selectors and use css for example here:
https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

And is it possible to apply different text formats within the same text box and even within a single line? For example, if I want three words in a line to be a bit bolder, my problem is, that the entire text box switches to bold instead. Can this be adjusted?

if you want to use multiple textformats within one line, you need text formats of type "character"
other than that you can use as many textformats as you want inside a textbox. just use the "formats" dropdown in the texteditor!

[arminunruh]

probably we could also change the z-index with css so your links overlap the x icon.
the thing is, the space around setting for the x icon is space around that is still clickable to close the overlay.
https://kunst.uni-koeln.de/carelab/ this link doesnt seem to work anymore, if you had a new link, i could write some css for you so the text would overlap the x icon, so only that text would be clickable