Okay
  Public Ticket #377510
Hide Nectar slider on mobile
Closed

Comments

  • Joe started the conversation
    February 20, 2015 at 8:22pm

    Hi, I would hide Nectar Slider on mobile devices for a faster loading, replacing with a bg static image (es: row bg image)

    I tried with this extra css, suggested by author team, in custom scc box:

    @media only screen and (max-width: 1000px) {
    .nectar-slider-wrap {
    display: none!important;
    }
    }

    but on mobile results in a grey box in place of the slider.


    any advice?

    thank U in advance, Teo

  •  8,998
    Tahir replied
    February 21, 2015 at 11:58am

    Hey!

    You'd need to add a class to them such as "mobile-hidden" and then add this into the custom css box located in your Salient Options panel: 
    

    
@media only screen and (max-width: 1000px) {
    
  .mobile-hidden {
    
     display: none!important;
    
  }
    
}


    Thanks

    ThemeNectar Support Team 

  •  1
    Paul replied
    January 30, 2017 at 8:34pm

    Hi Tahir,

    I too am trying to hide a nectar slider for mobile users, I originally just tried to edit the responsive options on the page, but the 'hidden on device' didn't seem to affect the nectar slider. When I used the code I found below, it did hide it, but it only masked it with a black bar. Is there a way to make it go away completely and have the content below moved to the top? 

    The class I used for this slider is "nextgen" and the code I used was:

    @media only screen and (max-width: 1000px) {
      .nextgen {
         display: none!important;
      }
    }

  •  8,998
    Tahir replied
    January 31, 2017 at 2:13pm

    @Paul,

    If you have the Parallax Option Activated in the Nectar Slider Settings the class name wont get added to the Frontend as the Html Markup is different . 

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    /* if Parallax Option is Checked */
@media only screen and (max-width: 1000px) {
    .nectar-slider-wrap {
        display: none!important;
    }
}

    Bes.t

    ThemeNectar Support Team