Add “MENU” text to 3-bar Menu button does not work

@mikeblock0

I looked at the demo site and the button is .menu-btn not .btn-navbar

Also please correct the quotemarks

content:’Menu’;

not

content:”Menu”;

Thank-you salsaturation.
So this is the code I have put into my child CSS
/* START OF Add “MENU” text to 3-BAR Menu button */
.menu-btn {
width:90px;
height:30px;
vertical-align: top;
}
.menu-btn:after {
content:’Menu’;
float:right;
margin:-16px 0 0 0;
}
/* END OF Add “MENU” text to 3-BAR Menu button */

It shows nothing on mobile devices.
(I also tried “MENU”)
Any other ideas?
Thanks

Please give a link to your site with the code still there

you need to also add stuff in the child theme function.php file

// START OF Add "MENU" text to 3-BAR Menu button (Needs additional CSS code in Child Theme style.css) 
 
// Remove 3-bars from menu button
add_filter('tc_menu_display', 'rdc_menu_display');
function rdc_menu_display($output) {
    return preg_replace('|<span class="icon-bar"></span>|', null, $output);
}

add_filter('tc_regular_button_class', 'my_regular_menu_button_class');
function my_regular_menu_button_class( $classes){
return array_merge( $classes, array( 'btn', 'btn-primary') );
}

// END OF Add "MENU" text to 3-BAR Menu button (Needs additional CSS code in Child Theme style.css)

This is my CSS code:

/* START OF Add "MENU" text to 3-BAR Menu button (Needs additional php code in Child Theme functions.php) */
 
.btn-toggle-nav.btn-primary {
    padding-left:0;
}
.navbar .btn-toggle-nav .menu-btn {
    height: 22px;
    width: 45px;
    position: relative;
    z-index: 2;
}
.btn-toggle-nav.btn.btn-primary.pull-right {
    position: relative;
}
.btn-toggle-nav .menu-label {
    display: block;
    position: absolute;
    left: 8px;
    top: 1px;
    z-index: 1;
}

/* END OF Add "MENU" text to 3-BAR Menu button (Needs additional php code in Child Theme functions.php) */

Thanks salsaturation. The link to my website is https://www.stopsmokingkettering.org.uk

Thanks Stellamaris5. I put these pieces of code in my child theme PHP and CSS respectively. The result is that the hamburger icon has disappeared. In it’s place is a vertical blue button with no text either on the button or next to it. The blue button does nothing.

MIght need adjusting but I don’t know exactly what , I got the help for this ages ago here on this forum as well.

It only appears on mobile and the normal menu on desktop. I can see on mobile it’s there on your site but no text ‘Menu’

Try replacing my CSS code with your original one that @salsaturation fixed for you

and make sure that If you are using a server cache or cache plugin, please clear your cache content and browser history.

just looked at you site and ther is

@media (max-width: 979px) {
.btn-toggle-nav .menu-label {
    display: none; 
}
}

Add this

@media (max-width: 979px) {
.btn-toggle-nav .menu-label {
    display: block; 
}
}

Thank-you stellamaris5. I have put back the code that salsaturation fixed for me. I have also made sure that the page refreshes properly with cache clearing. I still have the problem.

Thank-you salsaturation. I have put the code back in that you fixed. I have also added:

@media (max-width: 979px) {
.btn-toggle-nav .menu-label {
display: block;
}
}

into my child CSS file, but I still have the same problem. I have also made sure that my site is caching properly.

It appears to work on an ipad but not on a mobile phone?