Carousel Gallery runs over fixed navigation bar

Site URL: https://www.prestigecoolrooms.com/

Hi guys,

This morning I added a Slideshow gallery to my page and I notice that when scrolling down it runs over the navigation bar.

If you look at the attached image you will see what I mean. I'm using Squarespace 7.0 with the Brine template and it's been working fine.

Here's the code for the fixed navigation bar that I've been using. Has anyone had the same problem?

Do I need to add another code to fix the Gallery? 

//Fix Main Navigation Bar
.Header-inner { z-index: 4; width: 100%; }

.Header-inner { z-index: 4; width: 100%; }
.Header{ z-index: 10; position: fixed; width: 100%;  }
 p, h1, h2 {
    -webkit-hyphens: manual !important;
       -moz-hyphens: manual !important;
        -ms-hyphens: manual !important;
            hyphens: manual !important;
  }

Can you share link to page where you use gallery?

Hi Tuanphan,

Thanks for your reply. Here it is:

https://www.prestigecoolrooms.com/specifications

If you scroll down, where the Machinery section, you will see the gallery runs over the fixed navigation bar.

Any help with this please?

2 hours ago, OHMarketing said:

Any help with this please?

Add to Home > Design > Custom CSS

header.Header.Header--top {
    z-index: 999;
}

On 4/29/2020 at 1:33 PM, tuanphan said:

Add to Home > Design > Custom CSS

header.Header.Header--top {
    z-index: 999;
}

 

Thanks Tuanphan, I have added the code and now the picture is ok, but the "previous" and "next" arrow is still overlay on the navigation bar.

Please see attached to understand what I mean. Do you have other codes to add in?

The link to the website is:

https://www.prestigecoolrooms.com/specifications

8 hours ago, OHMarketing said:

Thanks Tuanphan, I have added the code and now the picture is ok, but the "previous" and "next" arrow is still overlay on the navigation bar.

Please see attached to understand what I mean. Do you have other codes to add in?

The link to the website is:

https://www.prestigecoolrooms.com/specifications

 

 

Add to Home > Design > Custom CSS

.sqs-gallery-controls a {
    z-index: 998 !important;
}

Wow I don't know what the code is about but it works like a charm. Thank you so much for your help.

Hi @tuanphan, I'm also having issues with this on my site. Can you please help? I tried the code supplied in the earlier comment but didn't seem to work. Link here https://www.banffcollective.com/intimate-private-rooms

5 hours ago, morristheskinny said:

Hi @tuanphan, I'm also having issues with this on my site. Can you please help? I tried the code supplied in the earlier comment but didn't seem to work. Link here https://www.banffcollective.com/intimate-private-rooms

.Header-inner.Header-inner--bottom {
    z-index: 999;
}


.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    
    z-index: 998;
}