Menus on mobile


#1

Hello!

I need some help! The Menu icon, when viewed on mobile shows as lines. Is there anyway to get it to say Menu or be a bit more obvious for people to click it when viewing on mobile?

Thanks


#2

Hi,

Please post a link to your website, so we can check for the best solution.

Best Regards,
Csaba


#3

Thanks - its www.ironworkswrexham.com


#4

Hi,

Please try this Custom CSS and let me know how it works:

.fa-navicon:after, .fa-reorder:after, .fa-bars:after {
    content: "MENU";
    font-size: 28px;
    font-weight: bold;
    margin-left: 2px;
}

With this CSS the text will be after the bars or you want to just say MENU in place of the bars? Please let me know.

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Best Regards,
Csaba


#5

Thanks, that worked great - could you do a css version for just having it saying menu as well instead of having tt witth the lines as well?

Cheers!


#6

Hi,

Ok, here it is a CSS which makes the MENU text to appear in place of the lines:

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "MENU" !important;
    font-size: 24px;
    font-weight: bold;
}

Please let me know how it works.

Best Regards,
Csaba


#7

Perfect thank you!


#8

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba