How to add a "MENU" label next to 3 line menu icon

Hi GavickPro,

Can you please tell me how I can add a small text label which says "MENU" next to the three line menu icon which displays automatically in the responsive mobile view of the Music State template? I feel that many visitors in my site's target audience do not know what those lines mean.

I'd like to do it in a way that is not a hack of the template so I don't have to redo it when I upgrade the template. I'd guess it would be a template override, but I'm not sure how to do it.

Thanks in advance for your help.

Best,
Railer

Hello,

You can try to use the following solution:

Code: Select all

@media (max-width: 1040px) {
#gkLogin {
   right: 130px;
}
#gkMobileMenu:before {
   content: "Menu";
   display: block;
   font-size: 14px;
   font-weight: bold;
   position: absolute;
   width: 100px;
   right: 13px;
   text-transform: uppercase;
}
}

Please add the above code under the template advanced settings in the custom CSS option. Then this change will not disappear after the template update.

Thanks dziudek,

Perfect! The login button was on top of the word "MENU" so to push the button over to the left, I had to add "!important" (I also changed the pixel dimension):

@media (max-width: 1040px) {
#gkLogin {
right: 115px !important;
}

Now of course, the Login button is crashing into my custom logo. I'll make separate thread about that.

Thanks,
Railer