I noticed this when trying out and using a button in the new modal but it is also occurring with a button just on its own. It seems to have a phantom inner blue border, not set in the settings?
I have this same problem with a phantom blue border, - but it appears on the published website! Strange enough only on the first button in a menu-list with several buttons. the others are ok. How can I get rid of it?
Please have a look at it on a mobile view:
It depends how which component you’re using to create that menu, but the following tailwind class will remove the blue outline: outline-0
I can’t quite tell from your site which combination of components you’re using to create that menu, so if you’re not sure where to add that class, can you post a screenshot of the tree structure of the page or send me a link to your project file?
Here is a screenshot of the tree structure, I used Dropdown and Modal to create this menu (it was quite a bit of work, trying to find a way to make a bilingual site).
How could I send you the project file? Via WeTransfer, or else…???
Where and how can I insert the tailwind class you mentioned? I am a dummie with everything concerning codes and classes.
And may I ask a second question: I can’t figure out how to make the mobile dropdown menu being fixed. Actually it is moving up and down on mobile, which is a bit confusing and annoying (please see screen-video 1 from my mobile).
This happens only on mobile device, but not when I simulate a mobile on my computer (see screen-video 2 from my computer).
Can anybody help me with the following two problems with the menu I have built for to be able to have a bilingual site? I am completely new to Elements (coming from Classic) and can’t find a solution myself…
1: a blue border appears on the first button in the mobile menu-list with several buttons. The others are ok.
I have inserted the tailwind class Ben mentioned above: outline-0 to this button component and all instances above this first button, but it didn’t solve the problem.
2: I can’t figure out how to make the mobile dropdown menu being fixed. Actually it is moving up and down on mobile, which is a bit confusing and annoying (please see screen-video 1 from my mobile in this forum post).This happens only on mobile device, but not when I simulate a mobile on my computer (please see screen-video 2 from my computer in this forum post).
Hi Ben,
thank you for the video. I did everything EXACTLY how you showed in the video, but the blue border is still there!
I am afraid I need your further help… Could you please have a look?
Here is the link to the new modified project file. Thanks!
Unfortunately, the only downside is that this blue border (outline for accessibility) is still there, even though I followed the instructions in your video to the letter and inserted the CSS class to the Buttons components.
Could you please have another look at the project to see what might be causing this? I’ll upload the latest version to the cloud again; here’s the link:
Hi Ben,
this is not the reason, I have tried this before, even with a button as first item (and with ONLY buttons in the modal menu) the blue border is always there.
hmm, that’s not the case for me. If I remove your Text component, the first Button does not have the blue border when opening the modal. Which browser are you using?
I am using Safari, but have tested the website as well in Chrome, Firefox and Opera. Everywhere the same.
I have removed the Text component as well, - no difference in none of the browser.