When I tab my own website (using tabindex=“0”), after the first couple of tabs, I can't see what ite

Solved
Highlighted
Excursionist
25 6 5

Okay, now I fairly understand how the template was set up. It is reusing the navigation liquid template into the mobile navigation. We could set the tabindex in the main navigation to "-1" but that's probably not what you want. So I've come up with a little JS hack that will fix it for you just like that. I'm not fond of slapping on patches but it'll do.

Put this script at the bottom of the BODY element in your theme.liquid.

<script>
(function () {
    var a = document.querySelectorAll('.header-drawer a');
    for (var i = 0; i < a.length; i++) a[i].tabIndex = "-1";
})();
</script>

This should be compatible with IE8+.

 

But your theme does have JQuery installed. Use this instead:

<script>
$(function () {
    $('.header-drawer a').attr('tabindex', '-1');
});
</script>

Let me know if this helps.

0 Likes
Highlighted
Pathfinder
78 3 9

@Winbox Thank you so much! It works, but now in mobile, it skips the pages in the drawer. Do you have a code for that? Thanks!

0 Likes
Highlighted
Pathfinder
78 3 9

@Winbox Is it possible to create a code based on the size of the device?

 

Such as desktop = tabs work only for desktop menu

mobile/tablet = tabs work only for mobile drawer menu

0 Likes
Highlighted
Excursionist
25 6 5

You know what? Let's try a different approach. Instead of messing with tabindex values, we can simply hide away the mobile navigation until it is needed. I don't know why this isn't already part of the theme but we can add a "display: none" to the header-drawer for desktop view.

Add this CSS to the end of your stylesheet.

@media only screen and (min-width: 814px) {
    .header-drawer { display: none; }
}

You can get rid of the script I provided earlier.

However, I do believe that your theme uses SCSS, a CSS stylesheet that is dynamically generated. Look into your theme.scss.liquid asset file and do a search for ".header-drawer". Inside it, try adding the following code at the end within its curly brackets.

@include breakpoint(sm-up) {
  display: none;
}

I haven't really done SCSS myself but this looks promising. If this works, just use this code instead of the first one.

It may look something like this:

.header-drawer {
  display: block;
  width: 100%;
  height: 0;
  max-width: $max-width;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;

  .showing-drawer & {
    height: auto;
  }
  @include breakpoint(sm-up) {
    display: none;
  }
}
0 Likes
Highlighted
Pathfinder
78 3 9

@Winbox None of the codes work.

The first code was the only one that had any effect and the mobile navigation disappeared from desktop view.

But the off-screen tabs still show for mobile.

 

Isn't there a way to say if it's a certain size, it won't show the desktop, but if it's larger it won't show the mobile?

0 Likes
Highlighted
Excursionist
25 6 5

This is an accepted solution.

The more I work on this, the better I understand the issue. And it seems clear to me now.

Scrap everything from before and try this CSS. Let me know if it works for you.

.header-drawer { display: none; }
.showing-drawer .header-drawer { display: block; }

 

0 Likes
Highlighted
Pathfinder
78 3 9

@Winbox Thank you so much! It worked!

0 Likes
Highlighted
Excursionist
25 6 5

I'm glad we managed to figure it out!

Cheers!

0 Likes
Highlighted
Pathfinder
78 3 9

@Winbox The more I know, the more I want to know.

How do I change the color of the tab box (as pictured below) for mobile?

On desktop, it's black, which is perfect, but on mobile it's orange but I want it to be black too.

 

Screenshot 2020-09-25 124111.jpg

0 Likes
Highlighted
Excursionist
25 6 5

This is an accepted solution.

Add this CSS:

:focus {
    outline-color: black;
}
0 Likes