[Support request] Off canvas focus

[Steven]

It seems to have improved some. Focus is given to the overlay now. However, when moving through the menu, it eventually continues on to the page content instead of returning back to the top for the close menu link.

I thin the search is also experiencing something similar. When the search icon is selected by pressing the enter key, the search box isn’t visible and doesn’t appear to have focus.

[Tom]

Yea, that’s a tough one, as it involves trapping the focus inside the overlay. The user can press esc to get out of there, but I’ll see if I can figure out how to trap the focus.

Navigation search looks like a GP issue – the focus styling should remain as long as the search is open. Ideally, the color of the input would be different from the background, which would prevent this.

Right now you’re using this CSS:

.navigation-search input[type="search"]:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

Try this:

.nav-search-active input[type="search"],
.navigation-search input[type="search"]:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

[Steven]

Thanks for the CSS tweak. That appears to have resolved the search box display issue 😉

[Tom]

Awesome – glad the focus issue is fixed in the overlay as well.

I’ll research the focus trapping 🙂

[Author]

Posts