[Resolved] Custom Text in Header

[Brian]

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?

[Ying]

Hi Brian,

This is what I see on mobile, the toggle label “MENU” isn’t there.
https://www.screencast.com/t/K3BV2SZzxICR

Isn’t this what you see? Let me know if I miss anything 🙂

[Brian]

“MENU” is gone because I added CSS to reduce its size to 0px. I just didn’t think that was the best method 😉

[Leo]

Just to confirm, you’ve removed the mobile menu label in the customizer?
https://docs.generatepress.com/article/mobile-menu-label/

I’m not able to replicate this issue on my end:
https://www.screencast.com/t/2VadFFB3du6
https://www.screencast.com/t/6t39mXWee0Q

[Brian]

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!

[David]

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;
  }
}

[Brian]

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!

[David]

You’re welcome

[Author]

Posts