Okay
  Public Ticket #2667799
Drop Down Menu on mobile
Closed

Comments

  •  19
    david berman started the conversation

    Hi

    My site on mobiles has the drop down menu in a blue container.

    All sub categories are spaced very close together.

    This is not the case on desktop where it is perfect.

    How do I change the colour of the container?

    Increase the spacing between the sub categories

  •  2,963
    Andrew replied

    Hi David,

    Try the following custom css in Salient > General settings >CSS/Script related:

    @media only screen and (max-width: 1000px){
       body #slide-out-widget-area .menuwrapper li .sub-menu li a {
        line-height: 35px;
    }
    }
    

    Kind regards.

  •  19
    david berman replied

    Thanks it worked!

    Any ideas how to change the style and colour of the drop down on mobile container ONLY?( Desktop view is Perfect) As mentioned it is in a blue container which does not match my theme.

    Also dropdown on mobile does not give indication eg ">" next to the category that there are sub categories. How do I fix this?

  •  8,849
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    #slide-out-widget-area:not(.fullscreen-alt):not(.fullscreen), #slide-out-widget-area-bg.fullscreen, #slide-out-widget-area-bg.fullscreen-split, #slide-out-widget-area-bg.fullscreen-alt .bg-inner, body.material #slide-out-widget-area-bg.slide-out-from-right {
        background-color: #ff1053 !important;
    }
    li.menu-item.menu-item-has-children a:after {
        content: " >";
    }

    Thanks


    ThemeNectar Support Team 

  •  19
    david berman replied

    Hi Thanks for such awesome support.

    CSS did not make changes on mobile. What am I doing wrong?

  •  8,849
    Tahir replied

    Hey Again,

    I cant seem to view the CSS on the Live Page?. Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ .

    1. 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 .
    2. For Woocommerce caching issues see: https://docs.woocommerce.com/document/configuring-caching-plugins/ . 

    Thanks


    ThemeNectar Support Team 

  •  19
    david berman replied

    Thanks for response again.

    Does not appear to be a caching  issue. Purged all numerous time on mobile and desktop. Still no changes on mobile.

  •  8,849
    Tahir replied

    Hey Again,

    The Css Provided is not coming through on the live url. Also when added to the live browser it works as intended:


    6912213154.pngClick To Open Larger Image.

    Thanks


    ThemeNectar Support Team 

  •  19
    david berman replied

    Hi I downloaded Simple Custom CSS plugin and its working perfectly.

    Thanks for awesome support. You Rock!!!