Site logo

Archived topic

Custom Text in Header

22 replies · Started by Brian on February 10, 2021

Viewing posts 16–23 of 23

Right, makes sense. But, that is the desktop label, so if I remove it, I lose it on desktop as well. Perhaps because the mobile menu is off, there's no way to get rid of the "menu" the normal way for mobile? Since I assume it will always match the desktop version?

"MENU" is gone because I added CSS to reduce its size to 0px. I just didn't think that was the best method ;)

Yes, that's correct. The thing is, I have disabled the mobile menu in order to keep the text note I added in (the shipping notice). So, it seems that the mobile version of the header keeps all elements of the desktop, including the menu label.
Hopefully, that makes sense.
Thanks!

So we could mess around and use some different Hooks for Mobile. But the simpler option would be to remove the Off Canvas Menu Label, GP will generate Aria-labels for this.

Then add this CSS to place a label on the larger screen sizes:

@media(min-width: 600px) {
  .main-navigation .menu-bar-item.slideout-toggle > a:after {
    content: 'Menu';
    text-transform: uppercase;
  }
}

That's an interesting idea, thanks! For now, I'm busy with other stuff for them, so I'm going to leave it as-is with the 0px mobile text, since it's working fine. If I have to go back and edit this further, I'll try the above method.
Thanks again for all of your help!

You're welcome

This archived topic is closed to new replies.