My background slider is affecting my .sticky nav bar

1

Whats up code gang?

Ok I have a .sticky nav bar that contains buttons with drop-downs per button, each button has an onclick=“function()” js code. Just below the nav bar is a background slider containing images, which contains js code with a setTimeout function.

When I load the page and I DON’T scroll, the nav bar works fine and all buttons work as desired. The background slider works perfectly as well.

But if I scroll and the .sticky nav bar scrolls over the background slider my buttons on the nav bar become un-clickable UNTIIL the setTimeout function finishing running on the current picture then I am able to to click on the buttons.

Here’s my CSS code:

For my Nav Bar:



.top {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky !important;
    top: -1.0px;
    z-index: 2;
  }

  #buttons {
    text-align: center;
    padding-top: 1px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    color: black;
    font-size: 17px;
    display:inline-block;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 2;  
}

For my slider background:

.slideshow-box {
    background-color: white;
}

* {box-sizing:border-box}

/* Slideshow container  */
.slideshow-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    object-fit: cover;
}

#onepic {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    max-height: 600px;
}

#twopic {
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    max-height: 600px;
}

#threepic {
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    max-height: 600px;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

Is it my CSS code causing this issue or is my setTimeout function affecting my buttons? Thanks in advance.

2

Check the z-index of bg slider. It has to be lower than z-index: 2 as you have it for your sticky navbar

1 Like
3

No. Looks like z-index isn’t the issue. I swear it has to be setTimeout bc as soon as the image changes to the next image, you’re able to click on items within the nav bar. It’s just odd a button only on the nav bar would be affected.

4

Can you put the code on codepen and share it?

5

https://codepen.io/jonathanbeaty/

It’s the Cocokini website.

If you’re trying to replicate it, scroll the navbar over the background image and leave your cursor over “home” or “bikinis” and watch the cursor change from pointer to hand once the picture changes.

6

You have more <p> paragraphs with the same id(buttons). ids must be unique. you should change it into a class for styling purpose

1 Like
7

I think you are right but then why does the <a href> on the img act the same way as the buttons?

It seems to be an issue with the entire nav bar.

8

Can you give more details on what browser are u testing? On my phone at the moment but I will try to retest it later on same browser as you

9

Im on google chrome. Thanks for your help, really appreciate it.