When you explicitly set a
height for the
div class="item" elements, you carousel grows until it gets under your
svg element (which is absoluted positioned with a
z-index higher than 0).
The upper part of your SVG is transparent, that’s why you didn’t notice it. Still, it is covering the navigation.
z-index of the
svg element would be enough to see the navigation working, although I guess you should rework your layout.
I am trying to add the owl carousel to my website. After giving height to item div in owl carousel if click on dots or arrow the slides are not moving. But if I remove the height(class=’item’) and then if I click on dots or arrow slides are moving.
<section class='about' id='project'>
<div id="owl-demo" class="owl-carousel owl-theme owls">
<svg viewBox="0 0 1440 240"><path fill="#D81C4A" fill-opacity="0.2" d="M0,192L360,128L720,192L1080,160L1440,224L1440,320L1080,320L720,320L360,320L0,320Z"></path>
box-shadow: 0 4px 20px 0 rgb(216, 28, 74,0.6);
It worked. Thanks a lot. I don’t know what rework is needed. Any suggestions in layout rework?
It will depend on what you want to achieve. I imagine the SVG being a footer. If that is the case, you could take it out from the “projects”
If my suggestion had helped you, please, mark my answer as correct. Actually, I will kindly ask you to review all the questions that you have asked in StackOverflow and check if some answers deserve to be also marked as correct. So far you have received 9 answers but have accepted no one 🙂