Button Border Colour?

Hi Ben,
Thank you very much for your efforts, but unfortunately the blue border is still there.
That’s really baffling – I can see from your video that it’s not like that for you, is it?!?
Here is my screen video of your project published online.
The link is still:

https://test2.riccardodelfino.eu

But even in the preview in browser within elements it is still there…

:exclamation_question_mark:

To help pinpoint the source of the error, here’s another video:
The blue border appears when I open the modal menu, but disappears as soon as I click on one of the other buttons.
However, it reappears the next time I open the menu.

The story goes on and I am starting to get desperate…

Searching for the source of the error, I have tested the website on several mac computers and iphones from friends, and the blue border is everywhere, so the source can’t be a setting on my hard- or software.
Today I have tested the website with a friends Samsung mobile, Galaxy A55, Android V16: the boarder is white here, but what is much worse: the buttons in my menu don’t link to the anchors on the page! When I klick on them just nothing happens!!!

This is my first website with Elements. The last 4 weeks I have gone through a learning curve watching many many videos in the documentation, reading many posts in the forum, on search to how I could build a bilingual menu. All this ends up to be very frustrating for me and embarassing towards the clients, whom I am supposed to present the website next week, - and I still have not found a solution!!!
:unamused_face:
Is there anybody in the Forum who can help me, please…???

If you can send me the project file link to hallo@einfach-gute-seiten.de I will have a look.

Hi Jan, nice to meet you here again, and thank you for your offer to have a look.
Here is the link:
elementsapp://downloadDocument/PVd605i9t65N
https://dl.elementsapp.cloud/g/PVd605i9t65N

The Menu I am using and publishing is “Menu2”, a “homemade” menu. The other “Menu” in the project, made with the Elements Menu component, is hidden, since it does not work for a bilingual site.

Thanks again, I am looking forward if you can find something…
:folded_hands:

Just a hint - as I have seen this sometime ago:
In the Theme settings, which theme have you selected there?

When beginning this project, - not having any idea of Elements yet, I just selected the System theme. But I was not aware of the importance of the theme settings when creating a project. So during the learning process I made some custom overwriting, especially in Typography.
Next time I will start a project differently, caring more for the theme.

@ben We have found the culprit and here is the solution. Since there is a WCAG tradeoff, perhaps you can find a better way:

Bug:
When the mobile burger menu opens on a RapidWeaver Elements site, a solid blue or beige 2 px frame appears immediately around the first menu item (e.g. “MAHALL”), before the user has tapped anything. The frame stays visible until another item is tapped or the menu is closed, and it only appears on items that are links or buttons, never on plain text items.

Brief solution:
Elements renders the menu as role=“dialog” aria-modal=“true” and moves keyboard focus programmatically to the first item on open — Chromium/WebKit treat this as :focus-visible and paint Tailwind’s outline: solid 2px amber-50, which reads as the blue/beige frame. Suppress it project-wide with a scoped CSS block that removes outline and box-shadow on focused elements inside any [role=“dialog”] / [aria-modal=“true”] container. See details section for the full CSS block, placement options, and the WCAG trade-off.

For the details, pleas see the report.
01-mobile-menu-blue-frame.md (5.3 KB)

You are the hero of the day, Jan!!! Thank you very much for your support! :smiley:

@6harps I’m not sure if you’ve managed to fix the issue or not?

Either way, for anyone else who might be experiencing the same issue, to remove the outline you should add the following classes to all buttons in your modal:

focus-visible:outline-0 focus-visible:transition-none

That should fix the issue once and for all :grinning_face_with_smiling_eyes:

@ben
Thank you very much for asking whether the problem has been resolved. Yes, Jan Fuellemann helped me use AI to generate a code, which we applied in the Project settings in Template (see his post above titled ‘Solution’).
I’ll save your code as well, just in case I encounter a similar problem again. Best wishes and all the best with your work on Elements
Riccardo