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.