Elements Mobile Nav - First Link Boxed

Hello All,

I’m building a site using the Halos project and have a question about the mobile nav.

When opening the nav on mobile, the first link has a blue box around it. For now, it’s the logo (which is linked to the Main page), but if I remove the logo link, it’s boxed around the first nav item.

Is there a way to make this behavior stop?

That blue box is just the default browser focus ring. When you open the mobile menu, the browser automatically focuses the first link in the DOM (in your case, the logo area).

You could remove the link from the logo or add the following code to the head of your Project Template:

<style>
  a:focus {
    outline: none;
    box-shadow: none;
  }
</style>

Adding the css code would mean you’ll loose the focus ring for users that rely on visible keyboard navigation.

Thanks Dan! This is my first time seeing this and my attempts to style it failed. :slight_smile: