Okay
  Public Ticket #2506629
Menu Label on burger incon
Closed

Comments

  • oswaldopz started the conversation

    I want to have a Menu Label on the burger icon BUT ONLY ON DESKTOP VIEW.. how I can make it? 

  •  2,965
    Andrew replied

    Hi there,

    Add the following custom css in Salient > General settings > CSS/Script related to hide on mobile:

    @media only screen and (max-width: 1000px) {
      #top .span_9 > .slide-out-widget-area-toggle {
        display: none;
    }
    }
    

    Hope this helps.

  • oswaldopz replied

    Hi Andrew  My my desktop the icon burger and menu word is perfect but I just check on my cellphone and the Icon Burger is missing. 


  •  8,851
    Tahir replied

    Hey Again,

    Use this Revised CSS.

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 1000px) {
        #header-outer.transparent .slide-out-widget-area-toggle a i.label, #header-outer.transparent #top .span_9 > .slide-out-widget-area-toggle a.using-label .label {
            display: none !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  • oswaldopz replied

    Sorry to ask you again but I just realize in the shop pages (woocommerce pages) 

  • oswaldopz replied

    Sorry I forgot to mention the menu label is show in on shop pages (woocommerce pages)  on the rest of the website is fine

    Thanks for your help. 

  •  8,851
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 1000px) {
        #top nav ul .slide-out-widget-area-toggle a i.label {
            display: none !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  • oswaldopz replied

    Nothing changed

  •  8,851
    Tahir replied

    Hey Again,

    My Bad, The css was using max-width instead of min-width:

    @media only screen and (min-width: 1000px) {
        #top nav ul .slide-out-widget-area-toggle a i.label {
            display: none !important;
        }
    } 

    2824522382.pngClick Image to View Larger

    Thanks 


    ThemeNectar Support Team 

  • oswaldopz replied

    Sorry Tahir but nothing changed

  •  2,965
    Andrew replied

    Hi there,

    Try the following css:

    body #header-outer[data-has-menu][data-format][data-padding] #top .slide-out-widget-area-toggle[data-custom-color="true"] a i.label {
        display: none !important;
    }
    

    9765540008.png


    Thanks.

  • oswaldopz replied

    Hi I don't know why is to complicated but now with this new code I don't have the MENU Label anywhere.

  •  8,851
    Tahir replied

    Hey Again,

    I believe the cache is causing the discrepancy. 

    1. Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ .
    2. If you are using WP Rocket use this guide :  https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#critical-path-css .
    3. For Woocommerce caching issues see: https://docs.woocommerce.com/document/configuring-caching-plugins/ . 

    Use the CSS i earlier provided which would only hide the label on Desktop.

    @media only screen and (min-width: 1000px) {
        #top nav ul .slide-out-widget-area-toggle a i.label {
            display: none !important;
        }
    } 
    2824522382.pngClick Image to View Larger

    Thanks 



    ThemeNectar Support Team