Salient - Responsive Portfolio & Blog Theme

Add TEXT Next to Hamburger Menu Icon

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;