Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

dropdown is hidden behind image

Tags:

html

css

drop-down-menu

twitter-bootstrap

My Dropdown is hiding behind the image ( owl carousal one) when scroll down the nav bar then hover works properly.

Issue showing only in the upper area where the image is there.

I tried by giving z-index. By giving higher value to navbar than image slider. But that doesn't work.

And I tried overflow value also.

I gave overflow: visible; to navbar but still, it's not visible.

Screenshot of error dropdown

Dropdown in not showing completely

jQuery(document).ready(function($) {
    $("#owl-demo").owlCarousel({
        navigation : true,
        slideSpeed : 300,
        paginationSpeed : 500,
        items: 1,
        singleItem: true,
        autoPlay : 4000
    });
});

$('body').on('mouseenter mouseleave','.dropdown',function(e){
    var _d=$(e.target).closest('.dropdown');
    _d.addClass('show');
    setTimeout(function(){
        _d[_d.is(':hover')?'addClass':'removeClass']('show');
        $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
    },300);
});
/*sticky header position*/
.sticky.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    width: 100%;
}

header {
    background: transparent !important;

}

/*body {*/
    /*min-height: 1200px;*/
/*}*/
nav {
    background-color: #000000;
    min-height: 85px;
    color: white;
    opacity: 0.7;
}

.dropdown:hover>.dropdown-menu {
    display: block;
    overflow: visible;
    z-index: 1000;
    position: inherit;
    margin-top: 10%;
}

nav ul li a  {
    color:  white !important;
}

.top-div {
    font-size: 14px;
    background-color: black;
    color: white;
    padding-top: 10px;
}

.top-div p .fa-map-marker{
    margin-left: 4%;
}

.top-div p i {
    margin-right: 0.5%;
    margin-left: 3%;
    color: #c6b52d;
}

/* Ow; Slider CSS*/

#owl-demo {
    z-index: 30;
}

.owl-wrapper {
    positon: relative;
}

.owl-controls {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.owl-theme .owl-controls .owl-page span {
    background: #fff !important;
}

.owl-img {
    width: 100%;
}

.owl-text-overlay {
    position: absolute;
    text-align: center;
    width: 60%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.4);
    padding-bottom: 20px;
    font-family: "Open Sans", sans-serif;
    border-radius: 15px 50px 30px 5px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Imagine</title>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,800" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
   
</head>
<body>
<!--top header-->
<header>
    <!--most top info -->
    <!--<div style="height: 40px; background: red"></div>-->
    
    <!-- End most top info -->

    <nav class="navbar  navbar-expand-lg navbar-light top-navbar" data-toggle="sticky-onscroll">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="assets/images/Logo-white.png" height="70" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                <ul class="navbar-nav pull-right">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about-us.html">Who We Are</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown link
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Support & Service</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact Us</a>
                    </li>

                </ul>

            </div>
        </div>
    </nav>

</header>


<div class="owl-carousel owl-theme" id="owl-demo">
    <div>
        <div class="owl-text-overlay hidden-xs">
            <h2 class="owl-title">Arrow</h2>
            <p class="owl-caption hidden-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis purus vel enim suscipit, vitae volutpat ante scelerisque. Pellentesque blandit malesuada dui, sed aliquet risus molestie non.</p>
        </div><img class="owl-img" src="https://res.cloudinary.com/jbennett45/image/upload/v1474628443/arrow_dqnmmf.jpg"></div>
    <div>
        <div class="owl-text-overlay hidden-xs">
            <h2 class="owl-title">Flash</h2>
            <p class="owl-caption hidden-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis purus vel enim suscipit, vitae volutpat ante scelerisque. Pellentesque blandit malesuada dui, sed aliquet risus molestie non.</p>
        </div><img class="owl-img" src="https://res.cloudinary.com/jbennett45/image/upload/v1474628444/flash_pxythx.jpg"></div>
</div>
like image 490
Mohsin Avatar asked Jan 27 '26 17:01

Mohsin

2 Answers

Add z-index to nav.

The z-index property specifies the stack order of an element.

Reference

jQuery(document).ready(function($) {
    $("#owl-demo").owlCarousel({
        navigation : true,
        slideSpeed : 300,
        paginationSpeed : 500,
        items: 1,
        singleItem: true,
        autoPlay : 4000
    });
});

$('body').on('mouseenter mouseleave','.dropdown',function(e){
    var _d=$(e.target).closest('.dropdown');
    _d.addClass('show');
    setTimeout(function(){
        _d[_d.is(':hover')?'addClass':'removeClass']('show');
        $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
    },300);
});
/*sticky header position*/
.sticky.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    width: 100%;
}

header {
    background: transparent !important;

}

/*body {*/
    /*min-height: 1200px;*/
/*}*/
nav {
    background-color: #000000;
    min-height: 85px;
    color: white;
    opacity: 0.7;
    z-index: 999999; //Add this
}

.dropdown:hover>.dropdown-menu {
    display: block;
    overflow: visible;
    z-index: 1000;
    position: inherit;
    margin-top: 10%;
}

nav ul li a  {
    color:  white !important;
}

.top-div {
    font-size: 14px;
    background-color: black;
    color: white;
    padding-top: 10px;
}

.top-div p .fa-map-marker{
    margin-left: 4%;
}

.top-div p i {
    margin-right: 0.5%;
    margin-left: 3%;
    color: #c6b52d;
}

/* Ow; Slider CSS*/

#owl-demo {
    z-index: 30;
}

.owl-wrapper {
    positon: relative;
}

.owl-controls {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.owl-theme .owl-controls .owl-page span {
    background: #fff !important;
}

.owl-img {
    width: 100%;
}

.owl-text-overlay {
    position: absolute;
    text-align: center;
    width: 60%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.4);
    padding-bottom: 20px;
    font-family: "Open Sans", sans-serif;
    border-radius: 15px 50px 30px 5px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Imagine</title>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,800" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
   
</head>
<body>
<!--top header-->
<header>
    <!--most top info -->
    <!--<div style="height: 40px; background: red"></div>-->
    
    <!-- End most top info -->

    <nav class="navbar  navbar-expand-lg navbar-light top-navbar" data-toggle="sticky-onscroll">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="assets/images/Logo-white.png" height="70" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                <ul class="navbar-nav pull-right">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about-us.html">Who We Are</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown link
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Support & Service</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact Us</a>
                    </li>

                </ul>

            </div>
        </div>
    </nav>

</header>


<div class="owl-carousel owl-theme" id="owl-demo">
    <div>
        <div class="owl-text-overlay hidden-xs">
            <h2 class="owl-title">Arrow</h2>
            <p class="owl-caption hidden-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis purus vel enim suscipit, vitae volutpat ante scelerisque. Pellentesque blandit malesuada dui, sed aliquet risus molestie non.</p>
        </div><img class="owl-img" src="https://res.cloudinary.com/jbennett45/image/upload/v1474628443/arrow_dqnmmf.jpg"></div>
    <div>
        <div class="owl-text-overlay hidden-xs">
            <h2 class="owl-title">Flash</h2>
            <p class="owl-caption hidden-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis purus vel enim suscipit, vitae volutpat ante scelerisque. Pellentesque blandit malesuada dui, sed aliquet risus molestie non.</p>
        </div><img class="owl-img" src="https://res.cloudinary.com/jbennett45/image/upload/v1474628444/flash_pxythx.jpg"></div>
</div>
like image 197
Pardeep Dhingra Avatar answered Jan 29 '26 09:01

Pardeep Dhingra

You need to add z-index: 999 to the .navbar class. This is the overall parent of the dropdown menu:

jQuery(document).ready(function($) {
    $("#owl-demo").owlCarousel({
        navigation : true,
        slideSpeed : 300,
        paginationSpeed : 500,
        items: 1,
        singleItem: true,
        autoPlay : 4000
    });
});

$('body').on('mouseenter mouseleave','.dropdown',function(e){
    var _d=$(e.target).closest('.dropdown');
    _d.addClass('show');
    setTimeout(function(){
        _d[_d.is(':hover')?'addClass':'removeClass']('show');
        $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
    },300);
});
/*sticky header position*/
.sticky.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    width: 100%;
}

header {
    background: transparent !important;

}

/*body {*/
    /*min-height: 1200px;*/
/*}*/
nav {
    background-color: #000000;
    min-height: 85px;
    color: white;
    opacity: 0.7;
}

.dropdown:hover>.dropdown-menu {
    display: block;
    overflow: visible;
    z-index: 1000;
    position: inherit;
    margin-top: 10%;
}

.navbar {
  z-index: 999;
}

nav ul li a  {
    color:  grey !important;
}

.top-div {
    font-size: 14px;
    background-color: black;
    color: white;
    padding-top: 10px;
}

.top-div p .fa-map-marker{
    margin-left: 4%;
}

.top-div p i {
    margin-right: 0.5%;
    margin-left: 3%;
    color: #c6b52d;
}

/* Ow; Slider CSS*/

#owl-demo {
    z-index: 30;
}

.owl-wrapper {
    positon: relative;
}

.owl-controls {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.owl-theme .owl-controls .owl-page span {
    background: #fff !important;
}

.owl-img {
    width: 100%;
}

.owl-text-overlay {
    position: absolute;
    text-align: center;
    width: 60%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.4);
    padding-bottom: 20px;
    font-family: "Open Sans", sans-serif;
    border-radius: 15px 50px 30px 5px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Imagine</title>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,800" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
   
</head>
<body>
<!--top header-->
<header>
    <!--most top info -->
    <!--<div style="height: 40px; background: red"></div>-->
    
    <!-- End most top info -->

    <nav class="navbar  navbar-expand-lg navbar-light top-navbar" data-toggle="sticky-onscroll">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="assets/images/Logo-white.png" height="70" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                <ul class="navbar-nav pull-right">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about-us.html">Who We Are</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown link
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Support & Service</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact Us</a>
                    </li>

                </ul>

            </div>
        </div>
    </nav>

</header>


<div class="owl-carousel owl-theme" id="owl-demo">
    <div>
        <div class="owl-text-overlay hidden-xs">
            <h2 class="owl-title">Arrow</h2>
            <p class="owl-caption hidden-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis purus vel enim suscipit, vitae volutpat ante scelerisque. Pellentesque blandit malesuada dui, sed aliquet risus molestie non.</p>
        </div><img class="owl-img" src="https://res.cloudinary.com/jbennett45/image/upload/v1474628443/arrow_dqnmmf.jpg"></div>
    <div>
        <div class="owl-text-overlay hidden-xs">
            <h2 class="owl-title">Flash</h2>
            <p class="owl-caption hidden-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis purus vel enim suscipit, vitae volutpat ante scelerisque. Pellentesque blandit malesuada dui, sed aliquet risus molestie non.</p>
        </div><img class="owl-img" src="https://res.cloudinary.com/jbennett45/image/upload/v1474628444/flash_pxythx.jpg"></div>
</div>

Just a sidenote: You may want to change the color text for the submenu items as they are currently white, matching the background image and not visible.

like image 35
Cnye Avatar answered Jan 29 '26 08:01

Cnye

Sign in to Comment

Related questions

Problem with binding and unbinding mouse events to custom element
Letters overlapping when setting alpha using color
Wrap every occurrence of the text "Rs." with <span class="someClass">
PHP crawler for one special HTML element
Video tag at Chrome overlays on top
add a serial number while performing iteration in thymeleaf
How to start a new line after float:left with different height?
How to nest multiple counters in css?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!