Archived topic
Custom Text in Header
22 replies · Started by Brian on February 10, 2021
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?
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 :)
"MENU" is gone because I added CSS to reduce its size to 0px. I just didn't think that was the best method ;)
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
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