Add TEXT Next to Hamburger Menu Icon
Theme Version 8.5+
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
.slide-out-widget-area-toggle:not(.slide-out-hover-icon-effect) a:after {
content: "MENU";
font-size: 25px !important;
position: relative;
left: -81px !important;
top: -22px !important;
color:#000 !important;
}
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* add the text as a pseudo css element */
.slide-out-widget-area-toggle:not(.slide-out-hover-icon-effect) a span:after{
content: "MENU";
font-size: 25px !important;
position: relative;
left: -81px !important;
text-decoration: none;
transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-webkit-transition: color 0.2s linear;
top: 1px !important;
opacity: 0.75;
}
/* adjust for Mobile/Tablet devices */
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.slide-out-widget-area-toggle a span:after {
font-size: 15px !important;
left: -51px !important;
top: -6px !important;
}
}
/* increase width of icon to house the extra text */
header#top nav ul .slide-out-widget-area-toggle a {
margin-left: 65px !important;
}
/* Adjust colors for light and Dark header if Permanent transparent selected */
.midnightHeader.light .slide-out-widget-area-toggle a span:after {
color: #fff;
}
.midnightHeader.dark .slide-out-widget-area-toggle a span:after {
color: #333;
}
/* color and opacity when header is resized */
.small-nav .slide-out-widget-area-toggle a span:after {
color: #999 !important;
opacity: 1 !important;
}
.small-nav .slide-out-widget-area-toggle a:hover span:after {
color: #2ac4ea !important;
}
Best.