How to reduce header slider height?

Hi I was wondering if it is possible to reduce the height of the header slider?

Hello there,

Thank you for getting in touch here.

Basically, the default main slider height is handled by the jQuery Superslides plugin which is called in the js/scripts.js file. To modify the final height, you can use jQuery height() method applied to the main slider’s selector. Try to do the following steps:

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided Scripts in footer box

<script>
(function($){
      
  $(window).on('load resize', function() {

    var slideHeight = $('#slideshow').height();
    var newHeight = slideHeight-150;

    $('#slideshow').height(newHeight);
    
  });

})(jQuery);
</script>

  1. Save settings

You would need to clear your browser cache before reloading your site.

Regards,
Kharis

1 Like

It works!

Hi dear,
I have an issue with the height of the text of the slider. In fact, I find it too high (so too much near of my menu). How can I increase the distance between my menu item and my text scrolling? Thank you so much to help me. My website is: http://drevaleriemarx.com/. Thank you very much to help me!

Hello @marxval,

Please try adding this CSS code to Appearance > Customize > Additional CSS from your site dashboard.


.slide-inner {
  top: auto;
  bottom: 20px;
  min-height: 100px;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);  
}

Regards,
Kharis