Fixed navbar hiding while owl carousel starts

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-------
thanks in advance

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

<div class="nav-container">
.nav-container {
    position: relative;
    z-index: 2; /* 1 not working for some reason*/

Hope it worked :grinning:!

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

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

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

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

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.

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

Like I said you do not need a wrapper

Edit: I’m guessing your done with this so I will delete the pen

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

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

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

1 Like

:+1: if i can help, yep

here is pen–

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

1 Like

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

so would this also work? :

z-index: 1 !important;

oh! that why it was not working thanks.

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

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

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

1 Like