Fixed navbar hiding while owl carousel starts

1

Hi,
iam trying owl carousel but my fixed position navbar is hiding on scroll when carousel starts itried hard but dont know why this is happening, i have attached codepen-------
https://codepen.io/gurpreet_singh9189825/pen/MWbGOKB
thanks in advance

2

Hi there!
wrap the <nav> with a <div>
I used position and z-index

<div class="nav-container">
    <nav>
    </nav>
</div>

.nav-container {
    position: relative;
    z-index: 2; /* 1 not working for some reason*/
}

Hope it worked :grinning:!

3

hi,
i dont think wrapping navbar inside div would change anything, and iam using position fixed so that it stays on the top and z-index is not working i tried.

even position fixed is working in whole page except carousel

4

You should be able to just add the z-index to the .navbar CSS (without using a wrapper element).

5

i tried z-index to navbar but when carousel start it disappear

6

What do you mean by “when it starts”? I do not see any code that would switch slides automatically. Is the Codepen missing some JS code?

Edit: You also have a bunch of errors in the HTML. Use the validator (down arrow dropdown on the codebox) and fix the errors. I guess it was just a string that was not closed correctly.

1 Like
8

what i meant is that when i scroll page navbar disappear and when carousel container finished it show again.
1-navbar showing
2-page scroll(header come into viewport:navbar disappear.
3 header scrolled off navbar show again.

9

hey its working :smiley: iam sorry. that time it wont work . could you tell what just happened using wrapper and position relative?

10

Like I said you do not need a wrapper

Edit: I’m guessing your done with this so I will delete the pen
https://codepen.io/lasjorg/pen/PobeEJy

11

I use z-index to order elements (like layers) :sweat_smile:
thought i didn’t get you.

12

yes its also working using more z-index value making it to stick to top
i was using z-index:1 which was not working, earlier i dont have any solutions now i have two :smiley: thanks to both of you…

1 Like
13

@Trinity_log @lasjorg i have one javascript problem also, do u guys have few more minutes??

1 Like
14

:+1: if i can help, yep

15

here is pen–
https://codepen.io/gurpreet_singh9189825/pen/vYyRVMN

what i want is that when container come into viewport via scrolling javascript add class and when it left remove class

1 Like
16

Yes, z-index: 1 won’t work because the .owl-carousel class already has a z-index: 1 on it.

.owl-carousel {
  display: none;
  width: 100%;
  z-index: 1;
}

For headers/navs you can usually just give them a high z-index as they are always supposed to be on top of everything else.

1 Like
17

so would this also work? :

z-index: 1 !important;
18

oh! that why it was not working thanks.

19

@Trinity_log @lasjorg do you have any solution for my javascript code as well.
it would be so great

20

No that wouldn’t work, it won’t overwrite anything. It’s not a specificity or cascading issue, the two elements will still share the same z-index.

1 Like
21

You already have a thread for that question so I suggest you keep it to that thread.

1 Like