1

I have 2 dropdowns buttons, when you click your username box and when you click 'Prime'. But the dropdown is behind the content, it must be shown over the content that is shown (eg: movies, news)

I've tried deleting position releative from: div.news-item, .carousel-nav-center, but nothing is working...

How can I fix this problem?

$(document).ready(() => {
    let navText = ["<i class='fa fa-chevron-left'></i>", "<i class='fa fa-chevron-right'></i>"]

    $('.list-tlte').owlCarousel({
        items: 2,
        dots: false,
        nav: true,
        navText: navText,
        loop: true,
        autoplay: true,
        autoplayHoverPause: true,
        margin: 20,
        responsive: {
            500: {
                items: 2
            },
            1280: {
                items: 4
            },
            1600: {
                items: 5
            }
        }
    })
})
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

:root {
    --main-color: #4D6275;
    --second-color: #3F5060;

    --body-bg: #2E3841;
    --box-bg: #272F37;

    --text-color: #D5D5D5;
    --grey-color: #B2B2B2;
    --simple-color: #C3C3C3;

    --content-height: 92px;
    --space-top: 30px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

a {
    text-decoration: none !important;
}

button:focus {
    outline: none;
}

.wrapper {
    position: relative;
    width: auto;
    height: 100%; /* 100vh */
    padding: 15px;
    font-size: 1.1em;
    top: 0;
}


.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--body-bg);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-color);
    height: var(--content-height);
    border-bottom: 2px solid #3B4651;
}

.nav-menu {
    list-style-type: none;
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-left: 170px;
    font-size: 20px;
}

.nav-menu li ~ li {
    margin-left: 50px;
}

.nav-menu li a {
    color: var(--text-color);
}

.nav-menu li a:hover {
    color: var(--grey-color);
}

.nav-menu li a i {
    padding-left: 3.5px;
    font-size: 15px;
}

.nav-options {
    list-style-type: none;
    display: flex;
    align-items: center;
    font-size: 20px;
}

.nav-search {
    margin-right: 50px;
}

.nav-account {
    margin-right: 50px;
}

.box-account {
    margin-top: 10px;
    background-color: var(--main-color);
    border-radius: 3px;
    min-width: 170px;
    max-width: 350px;
    height: 40px;
    transition: 0.3s ease-in-out;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.box-account-name {
    text-align: left;
    padding-left: 20px;
    padding-top: 2.5px;
    font-size: 20px;
}

/*
.box-account-name i {
    float: right;
    margin-top: 8px;
    margin-right: 10px;
    font-size: 15px;
}
*/

.nav-account-avatar-display {
    width: 32px;
    height: 32px;
    float: right;
    clear: right;
    margin-top: 2px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 50%;
}

.nav-account a {
    color: var(--text-color);
}

.box-account:hover {
    background-color: #3F5160;
    transform: translateY(-10%);
}

.nav-search {
    margin-top: 5px;
}

.nav-search a {
    color: var(--text-color);
}
/* ------------ Dropdown ------------ */

.dropdown-btn-menu {
    display: block;
}

/* ------------ Dropdown - Default ------------ */

.default-dropdown-menu {
    background-color: var(--main-color) !important;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.default-dropdown-item {
    background-color: var(--main-color) !important;
    color: var(--text-color) !important;
}

.default-dropdown-item:hover {
    background-color: #3F5160 !important;
    color: var(--text-color) !important;
}

.default-dropdown-divider {
    border-color: #354554;
}

.default-dropdown-item-title {
    font-weight: 500;
}

/* ------------ Carousel ------------ */

.carousel-nav-center {
    position: relative;
}

.carousel-nav-center .owl-nav button i {
    font-size: 1rem;
}

.carousel-nav-center .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-nav-center .owl-nav .owl-prev {
    top: 0;
    right: 45px;
    padding-bottom: 300px;
    transform: translateY(-150%);
}

.carousel-nav-center .owl-nav .owl-next {
    top: 0;
    right: 15px;
    padding-bottom: 300px;
    transform: translateY(-150%);
}

.carousel-nav-center .owl-nav .owl-prev:hover, .carousel-nav-center .owl-nav .owl-next:hover {
    color: grey;
}

.box {
    width: 99%;
    margin: 0 0 20px;
    background: var(--box-bg);

    border: 5px solid var(--box-bg);
    border-radius: 15px;

    padding-left: 15px;

    padding-top: 15px;
    padding-bottom: 15px;
}

.item-info span {
    font-weight: 700;
}

/* ------------ Carousel END ------------ */

.my-anno-news {
    width: 50%;
}

.news-item {
    position: relative;
    margin-bottom: 30px;
}

.news-item ~ .news-item {
    padding-top: 30px;
    border-top: 2px solid #3B4651;
}

.news-date {
    position: absolute;
    left: 0;
    text-align: center;
    width: 86px;
    
}

.day-news {
    font-size: 30px;
    color: #CACACA;
}

.month-news {
    font-size: 11px;
    font-weight: 600;
    color: lightblue;
    text-transform: uppercase;
    display: block;
}

.title-news {
    max-width: 600px;
    margin: 0 auto;
}

.text-news {
    color: grey;
    max-width: 600px;
    margin: 0 auto;
}

.title-news a {
    color: unset;
}

.title-news a:hover {
    color: lightblue;
}
<!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css?">
        
        <!-- Bootstrap -->
        <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

        <!-- Ionicons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
        
        <!-- Load sweetalert2 -->
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
        
        <!-- Google Font -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
        

        <!-- OWL CAROUSEL -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
        
        
        
<body>
        
<div class="wrapper">
        <div class="main-nav">
            <div class="nav">
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#" role="button" class="dropdown-btn-menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Prime <i class="fa fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu default-dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item default-dropdown-item" href="#">Prime Movies &amp; Series</a>
                            <div class="dropdown-divider default-dropdown-divider"></div>
                            <a class="dropdown-item default-dropdown-item" href="#">Purchase prime</a>
                            <a class="dropdown-item default-dropdown-item" href="#">Checkout prime benefits</a>
                            <div class="dropdown-divider default-dropdown-divider"></div>
                            <a class="dropdown-item default-dropdown-item" href="#">High quality releases</a>
                            <a class="dropdown-item default-dropdown-item" href="#">Time on new releases</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url('movies') }}">
                            Movies
                        </a>
                    <li class="nav-item">
                        <a href="{{ url('series') }}">
                            Series
                        </a>
                    </li>
                </ul>
                <ul class="nav-options">
                    <li class="nav-search">
                        <a href="#"><i class="fa fa-search"></i></a>
                    </li>
                    <li class="nav-account">
                        <a href="#" role="button" class="dropdown-btn-menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div class="box-account">
                                <div class="box-account-name">
                                    <span class="name-account-nav">nameUser</span>
                                    <img src="https://i.pinimg.com/474x/02/3e/eb/023eebc4bcee84dda420da10d3fe1c91.jpg" class="nav-account-avatar-display">
                                </div>
                            </div>
                        </a>
                        <div class="dropdown-menu default-dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item default-dropdown-item" href="#">Account settings</a>
                            <a class="dropdown-item default-dropdown-item" href="#">Preferences</a>
                            <a class="dropdown-item default-dropdown-item" href="#">Edit Notifications</a>
                            <div class="dropdown-divider default-dropdown-divider"></div>
                            <a class="dropdown-item default-dropdown-item" href="#">Logout</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        
        <!-- content page -->
        
        
<div class="content-wrapper">
    <div class="content-header">
        <ul class="header-menu">
            <li class="header-item active"><a href="#">Latest episodes</a></li>
            <li class="header-item"><a href="#">Subtitled episodes</a></li>
            <li class="header-item"><a href="#">View all</a></li>
        </ul>
    </div>

    <div class="box">
        <div class="list-tlte carousel-nav-center owl-carousel">
            <a href="#">
                <img src="https://wallpaperaccess.com/full/708459.jpg" alt="The Flash" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpaperaccess.com/full/317705.jpg" alt="Arrow" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://i.pinimg.com/originals/00/3e/68/003e68e1fa1a1f610581ae85a0b519e5.jpg" alt="Supernatural" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpapercave.com/wp/wp1915188.jpg" alt="Blacklist" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpaperaccess.com/full/2308401.jpg" alt="Legacies" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpapercave.com/wp/wp6239059.jpg" alt="DC's Legends of Tomorrow" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpaperaccess.com/full/1092351.jpg" alt="Lucifer" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://images.hdqwalls.com/wallpapers/bthumb/superman-and-lois-tv-series-4k-2021-te.jpg" alt="Superman &amp; Lois" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
        </div>
    </div>

    <div class="box my-anno-news">
        <ul class="list-news-menu">
            <li class="news-item">
                <div class="news-date">
                    <div class="day-news">16</div>
                    <div class="month-news">July 2021</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
            <li class="news-item">
                <div class="news-date">
                    <div class="day-news">25</div>
                    <div class="month-news">December 2020</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
            <li class="news-item" style="display: none;">
                <div class="news-date">
                    <div class="day-news">16</div>
                    <div class="month-news">July 2021</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
            <li class="news-item" style="display: none;">
                <div class="news-date">
                    <div class="day-news">16</div>
                    <div class="month-news">July 2021</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
            <li class="news-item" style="display: none;">
                <div class="news-date">
                    <div class="day-news">16</div>
                    <div class="month-news">July 2021</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
        </ul>
    </div>
    
</div>
        
        
        
        <!-- end content page -->
        
        
        
    </div>  
        
        
        
        
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    
    <!-- OWL CAROUSEL -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
    
    </body>
Freezy
  • 136
  • 15

2 Answers2

2

You need to add a z-index greater than the index of the elements that you want behind it, in your case the .main-nav element which defaults to 0 should be greater than the one of .owl-carousel which is currently 1. So the only change I made was that in the css.

$(document).ready(() => {
    let navText = ["<i class='fa fa-chevron-left'></i>", "<i class='fa fa-chevron-right'></i>"]

    $('.list-tlte').owlCarousel({
        items: 2,
        dots: false,
        nav: true,
        navText: navText,
        loop: true,
        autoplay: true,
        autoplayHoverPause: true,
        margin: 20,
        responsive: {
            500: {
                items: 2
            },
            1280: {
                items: 4
            },
            1600: {
                items: 5
            }
        }
    })
})
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

:root {
    --main-color: #4D6275;
    --second-color: #3F5060;

    --body-bg: #2E3841;
    --box-bg: #272F37;

    --text-color: #D5D5D5;
    --grey-color: #B2B2B2;
    --simple-color: #C3C3C3;

    --content-height: 92px;
    --space-top: 30px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

a {
    text-decoration: none !important;
}

button:focus {
    outline: none;
}

.wrapper {
    position: relative;
    width: auto;
    height: 100%; /* 100vh */
    padding: 15px;
    font-size: 1.1em;
    top: 0;
}


.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--body-bg);
    /*Only change made*/
    z-index:2;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-color);
    height: var(--content-height);
    border-bottom: 2px solid #3B4651;
}

.nav-menu {
    list-style-type: none;
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-left: 170px;
    font-size: 20px;
}

.nav-menu li ~ li {
    margin-left: 50px;
}

.nav-menu li a {
    color: var(--text-color);
}

.nav-menu li a:hover {
    color: var(--grey-color);
}

.nav-menu li a i {
    padding-left: 3.5px;
    font-size: 15px;
}

.nav-options {
    list-style-type: none;
    display: flex;
    align-items: center;
    font-size: 20px;
}

.nav-search {
    margin-right: 50px;
}

.nav-account {
    margin-right: 50px;
}

.box-account {
    margin-top: 10px;
    background-color: var(--main-color);
    border-radius: 3px;
    min-width: 170px;
    max-width: 350px;
    height: 40px;
    transition: 0.3s ease-in-out;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.box-account-name {
    text-align: left;
    padding-left: 20px;
    padding-top: 2.5px;
    font-size: 20px;
}

/*
.box-account-name i {
    float: right;
    margin-top: 8px;
    margin-right: 10px;
    font-size: 15px;
}
*/

.nav-account-avatar-display {
    width: 32px;
    height: 32px;
    float: right;
    clear: right;
    margin-top: 2px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 50%;
}

.nav-account a {
    color: var(--text-color);
}

.box-account:hover {
    background-color: #3F5160;
    transform: translateY(-10%);
}

.nav-search {
    margin-top: 5px;
}

.nav-search a {
    color: var(--text-color);
}
/* ------------ Dropdown ------------ */

.dropdown-btn-menu {
    display: block;
}

/* ------------ Dropdown - Default ------------ */

.default-dropdown-menu {
    background-color: var(--main-color) !important;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.default-dropdown-item {
    background-color: var(--main-color) !important;
    color: var(--text-color) !important;
}

.default-dropdown-item:hover {
    background-color: #3F5160 !important;
    color: var(--text-color) !important;
}

.default-dropdown-divider {
    border-color: #354554;
}

.default-dropdown-item-title {
    font-weight: 500;
}

/* ------------ Carousel ------------ */

.carousel-nav-center {
    position: relative;
}

.carousel-nav-center .owl-nav button i {
    font-size: 1rem;
}

.carousel-nav-center .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-nav-center .owl-nav .owl-prev {
    top: 0;
    right: 45px;
    padding-bottom: 300px;
    transform: translateY(-150%);
}

.carousel-nav-center .owl-nav .owl-next {
    top: 0;
    right: 15px;
    padding-bottom: 300px;
    transform: translateY(-150%);
}

.carousel-nav-center .owl-nav .owl-prev:hover, .carousel-nav-center .owl-nav .owl-next:hover {
    color: grey;
}

.box {
    width: 99%;
    margin: 0 0 20px;
    background: var(--box-bg);

    border: 5px solid var(--box-bg);
    border-radius: 15px;

    padding-left: 15px;

    padding-top: 15px;
    padding-bottom: 15px;
}

.item-info span {
    font-weight: 700;
}

/* ------------ Carousel END ------------ */

.my-anno-news {
    width: 50%;
}

.news-item {
    position: relative;
    margin-bottom: 30px;
}

.news-item ~ .news-item {
    padding-top: 30px;
    border-top: 2px solid #3B4651;
}

.news-date {
    position: absolute;
    left: 0;
    text-align: center;
    width: 86px;
    
}

.day-news {
    font-size: 30px;
    color: #CACACA;
}

.month-news {
    font-size: 11px;
    font-weight: 600;
    color: lightblue;
    text-transform: uppercase;
    display: block;
}

.title-news {
    max-width: 600px;
    margin: 0 auto;
}

.text-news {
    color: grey;
    max-width: 600px;
    margin: 0 auto;
}

.title-news a {
    color: unset;
}

.title-news a:hover {
    color: lightblue;
}
<!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css?">
        
        <!-- Bootstrap -->
        <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

        <!-- Ionicons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
        
        <!-- Load sweetalert2 -->
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
        
        <!-- Google Font -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
        

        <!-- OWL CAROUSEL -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
        
        
        
<body>
        
<div class="wrapper">
        <div class="main-nav">
            <div class="nav">
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#" role="button" class="dropdown-btn-menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Prime <i class="fa fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu default-dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item default-dropdown-item" href="#">Prime Movies &amp; Series</a>
                            <div class="dropdown-divider default-dropdown-divider"></div>
                            <a class="dropdown-item default-dropdown-item" href="#">Purchase prime</a>
                            <a class="dropdown-item default-dropdown-item" href="#">Checkout prime benefits</a>
                            <div class="dropdown-divider default-dropdown-divider"></div>
                            <a class="dropdown-item default-dropdown-item" href="#">High quality releases</a>
                            <a class="dropdown-item default-dropdown-item" href="#">Time on new releases</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url('movies') }}">
                            Movies
                        </a>
                    <li class="nav-item">
                        <a href="{{ url('series') }}">
                            Series
                        </a>
                    </li>
                </ul>
                <ul class="nav-options">
                    <li class="nav-search">
                        <a href="#"><i class="fa fa-search"></i></a>
                    </li>
                    <li class="nav-account">
                        <a href="#" role="button" class="dropdown-btn-menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div class="box-account">
                                <div class="box-account-name">
                                    <span class="name-account-nav">nameUser</span>
                                    <img src="https://i.pinimg.com/474x/02/3e/eb/023eebc4bcee84dda420da10d3fe1c91.jpg" class="nav-account-avatar-display">
                                </div>
                            </div>
                        </a>
                        <div class="dropdown-menu default-dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item default-dropdown-item" href="#">Account settings</a>
                            <a class="dropdown-item default-dropdown-item" href="#">Preferences</a>
                            <a class="dropdown-item default-dropdown-item" href="#">Edit Notifications</a>
                            <div class="dropdown-divider default-dropdown-divider"></div>
                            <a class="dropdown-item default-dropdown-item" href="#">Logout</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        
        <!-- content page -->
        
        
<div class="content-wrapper">
    <div class="content-header">
        <ul class="header-menu">
            <li class="header-item active"><a href="#">Latest episodes</a></li>
            <li class="header-item"><a href="#">Subtitled episodes</a></li>
            <li class="header-item"><a href="#">View all</a></li>
        </ul>
    </div>

    <div class="box">
        <div class="list-tlte carousel-nav-center owl-carousel">
            <a href="#">
                <img src="https://wallpaperaccess.com/full/708459.jpg" alt="The Flash" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpaperaccess.com/full/317705.jpg" alt="Arrow" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://i.pinimg.com/originals/00/3e/68/003e68e1fa1a1f610581ae85a0b519e5.jpg" alt="Supernatural" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpapercave.com/wp/wp1915188.jpg" alt="Blacklist" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpaperaccess.com/full/2308401.jpg" alt="Legacies" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpapercave.com/wp/wp6239059.jpg" alt="DC's Legends of Tomorrow" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://wallpaperaccess.com/full/1092351.jpg" alt="Lucifer" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
            <a href="#">
                <img src="https://images.hdqwalls.com/wallpapers/bthumb/superman-and-lois-tv-series-4k-2021-te.jpg" alt="Superman &amp; Lois" class="img-ep">
                <div class="item-name">Captain America: The First Avanger</div>
                <div class="item-time">Season 1, episode 5</div>
            </a>
        </div>
    </div>

    <div class="box my-anno-news">
        <ul class="list-news-menu">
            <li class="news-item">
                <div class="news-date">
                    <div class="day-news">16</div>
                    <div class="month-news">July 2021</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
            <li class="news-item">
                <div class="news-date">
                    <div class="day-news">25</div>
                    <div class="month-news">December 2020</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
            <li class="news-item" style="display: none;">
                <div class="news-date">
                    <div class="day-news">16</div>
                    <div class="month-news">July 2021</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
            <li class="news-item" style="display: none;">
                <div class="news-date">
                    <div class="day-news">16</div>
                    <div class="month-news">July 2021</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
            <li class="news-item" style="display: none;">
                <div class="news-date">
                    <div class="day-news">16</div>
                    <div class="month-news">July 2021</div>
                </div>
                <div class="content-news">
                    <div class="title-news"><a href="#">title for the news</a></div>
                    <div class="text-news">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    </div>
                </div>
            </li>
        </ul>
    </div>
    
</div>
        
        
        
        <!-- end content page -->
        
        
        
    </div>  
        
        
        
        
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    
    <!-- OWL CAROUSEL -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
    
    </body>
Parco
  • 602
  • 5
  • 12
  • So, bassically the z-index must be greater than another div z-index to work over that div. I understand that now, thank you for help! – Freezy Jul 16 '21 at 17:13
  • Their positioning is also a factor I'd suggest you check this post's answers [z-index divs](https://stackoverflow.com/questions/35772655/using-z-index-to-get-div-above-another-div) – Parco Jul 16 '21 at 17:15
0

maybe try using z-index for the needed positioning on the hidden content or the menu. You can set the selected item with {z-index: ;} to -1; or 1 depending on how you want to layer it.

Imagine the page three dimensional and the top layer(z axis) over the other content

Ramzi Osta
  • 63
  • 6