Najiyya

Please add the following code to Design > Custom Css:
 

.sqs-lightbox-meta{
p.sqsrte-small {
color:white !important;
}
}

Solved with
@media screen and (max-width: 767px) { div#block-yui_3_17_2_1_1648755210411_3112 .content-fit { max-height:60vh } }  

Please add the following code to Design > Custom Css:
 

.sqs-lightbox-meta{
p.sqsrte-small {
color:white !important;
}
}

Dear @tuanphan, 
Thank you for your reply 🙂 I tried your code, however the effect is not what I had in mind . I managed to come close with the code below (see also my site). However I still face two problems;
1. The underline under the navigation is quite far from the title. How do I decrease this distance so that the underline is directly under the title ? 
2. For the mobile navigation, the animation takes the entire mobile screen. How can I adjust it so that it only underlines the title? 
/* navigation underline animation */ .header-nav-item::after { content: ''; background: #FFFFFF; //color height: 2px; //thickness width: 0; display: block; margin-top: 0px !important; transition: width 0.5s; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; } /* mobile navigation underline animation */ .header-menu-nav-item::after { content: ''; background: #FFFFFF; //color height: 2px; //thickness width: 0; display: block; margin-top: 5px !important; transition: width 0.5s; //animation speed margin: 0.6 auto; } .header-menu-nav-item:hover::after { width: 100%; } .header-menu-nav-item--active a { background-image: none !important; }  

You will see this code in script
if (lang == "es") { $('a[href="/"]').attr("href", "/es/inicio/"); $('.btn').each(function() { var text = $(this).text(); $(this).text(text.replace('Contact Us', 'Contáctenos')); }); } if (lang == "en") { $('a[href="/"]').attr("href", "/en/inicio/"); $('.btn').each(function() { var text = $(this).text(); $(this).text(text.replace('Contáctenos', 'Contact Us')); }); }  

I managed to write a code using Jquery. It's not to most elegant way,  basically its made to click the next arrow in the slideshow every couple of seconds:
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> const init = () => { setInterval(() => { $('.gallery-reel-control [aria-label="Next Slide"]').trigger('click'); }, 6000); // change this value to change the speed } document.addEventListener('DOMContentLoaded', init); </script> You can insert this into Code Injection or in to the Advanced section of the specific page the Slideshow is on.

I haven't tested if this works on any other gallery types by the way.

Hi
Use this code in Design -> Custom CSS
body[data-menu-overlay-theme-switcher="true"] .header.black:not(.shrink) { background: transparent !important; } Please use the like button if it helps you!
Best,
Leopold