htmlcssoverflowbootstrap-5bootstrap-rtl

When I add overflow:hidden my drop downs stops working

I'm working on a personal news website and the name is News pews this is my third project and i didn't have this problem in my other project.

my page have a x scroll and when i want to remove it with overflow: hidden; it works but my drop downs disabled and i tried lots of other codes but none of them worked.

this is the code(i write these codes as short as possible only for this question):

you have to open this snippet in the fullpage to see the drop down (the fullpage button is at the end of the snippet). 

*{
    margin: 0;
    padding: 0;
    
}

body{
    /* overflow: hidden; */
    background-color: rgb(244, 242, 242);   
}

.the_bg_red{
    background-color: #EF233C;
}
.the_txt_red{
    color: #EF233C;
}
ul{
    list-style-type: none;
}

nav{
    height: 90px;
}

.menus{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.menus li{
    margin-left: 50px;
    margin-top: 10px;
    cursor: pointer;
}
.menus a{
    text-decoration: none;
    color: white;
}
/* ---------------li main---------- */
.li_main{
    position: relative;
}
.submenu_main{
    background-color: white;
    height: auto;
    min-width: 160px;
    position: absolute;
    display: none;
    top: 10vh;
    border-radius: 15px;
    transition: all 0.5s ease;
}
.li_main:hover .submenu_main{
    display: block;
    top: 5vh;
}

#search_btn{
    background-color: white;
    border-radius: 7px;
    border: none;
    width: 35px;
    height: 35px;
    justify-content: center;
    align-items: center;
    display: flex;
}
<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">
    <link rel="stylesheet" href="stayle.css">
    <title>News pews: P.A</title>
</head>

<body>

    <header class="w-100">
        <nav class="the_bg_red px-2 w-100">
            <div class="row h-100 ">
                <div class="col-1 d-flex align-items-center justify-content-center">
                    <button class="btn bg-light the_txt_red bars_btn p-3 darkmode_btn_toggle"></button>
                </div>
                <div class="col-7 col-xl-2 d-flex align-items-center">
                    logo img
                </div>
                <div class="col-7 d-none d-xl-flex justify-content-center ">
                    <ul class="menus h-100 text-light  ">
                        <li class="li_main ">
                            <div class="d-flex">
                                <p>main page</p><i class="fas fa-angle-down ms-2 mt-1"></i>
                            </div>
                            <div class="submenu_main ">
                                <ul class="">
                                    <li><a href="#" class="text-dark">author</a></li>
                                    <li><a href="#" class="text-dark">contact with us</a></li>
                                    <li><a href="#" class="text-dark">about us</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-4 col-xl-2 d-flex align-items-center justify-content-center p-0 ">
                    <button type="button" class="mx-2 me-md-5 ms-md-3 darkmode_btn_toggle" data-bs-toggle="modal" data-bs-target="#search_modal"
                        id="search_btn"></button>
                </div>
            </div>
        </nav>
    </header>



</body>
<script src="js/bootstrap.bundle.min.js"></script>

</html>

Solution

  • The dropdown in the middle always works for me, even if I activate the commented out overflow: hidden in the body. The dropdown is cut off if you add overflow: hidden to the nav. Maybe you tried that once.

    If I understand correctly, the actual problem is the overflow on the x axis and the resulting horizontal scrollbar.

    Why is there horizontal overflow?

    Your <div class="h-100 row"> causes the overflow. The .row class gives the element margin-left and margin-right and makes it wider than the element it is in.

    Fix the overflow

    I don't know much about bootstrap, but you need to limit the width of this element. The .row should be surrounded by an element with the class .container. This will fix your overflow. Alternatively, you can add the class .w-100 to the row.

    So a solution would be:

    <header class="w-100">
    <nav class="the_bg_red px-2 w-100">
        <div class="container">
            <div class="row h-100 ">
                  <!-- Rest of the HTML code -->
            </div>
        </div>
    </nav>
</header>

    Alternatively:

    <div class="row h-100 w-100">