Im working on a presonal news website and the name is News pews this is my third project and i didnt 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 my html code:
<!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="css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="css/stayle.css">
<script src="js/all.min.js"></script>
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<title>News pews: P.A</title>
</head>
<body>
<header class="w-100">
<div class="top_bar p-2 px-md-4 px-2 the_bg_red w-100">
<p class=" h-100 text-light"><i class="far fa-calendar-minus ms-2"></i>چهار شنبه ، ۱۳ تیر ۱۴۰۳</p>
<ul class="social d-flex pe-5">
<li><a href="#"><i class="fab fa-pinterest-p "></i></a></li>
<li><a href="#"><i class="fab fa-wordpress-simple"></i></a></li>
<li><a href="#"><i class="fab fa-dribbble"></i></a></li>
<li><a href="#"><i class="fab fa-whatsapp"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
<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">
<span class="fas fa-bars"></span>
</button>
</div>
<div class="col-7 col-xl-2 d-flex align-items-center">
<img src="images/logo.png" class="logo img-fluid ">
</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>صفحه اصلی</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">404</a></li>
<li><a href="#" class="text-dark">تماس با ما</a></li>
<li><a href="#" class="text-dark">درباره ما</a></li>
</ul>
</div>
</li>
<li>
<p><a href="#">مقالات</a></p>
</li>
<li class="li_life ">
<div class="d-flex">
<p>شیوه زندگی</p><i class="fas fa-angle-down ms-2 mt-1"></i>
</div>
<div class="submenu_life ">
<ul class="">
<li><a href="#" class="text-dark">404</a></li>
<li><a href="#" class="text-dark">تماس با ما</a></li>
<li><a href="#" class="text-dark">درباره ما</a></li>
</ul>
</div>
</li>
<li class="li_tec ">
<div class="d-flex">
<p>تکنولوژی</p><i class="fas fa-angle-down ms-2 mt-1"></i>
</div>
<div class="submenu_tec ">
<ul class="">
<li><a href="#" class="text-dark">404</a></li>
<li><a href="#" class="text-dark">تماس با ما</a></li>
<li><a href="#" class="text-dark">درباره ما</a></li>
</ul>
</div>
</li>
<li>
<p><a class="#" href="">مسافرت</a></p>
</li>
<li class="li_vij ">
<div class="d-flex">
<p>ویژگی ها</p><i class="fas fa-angle-down ms-2 mt-1"></i>
</div>
<div class="submenu_vij ">
<ul class="">
<li><a href="#" class="text-dark">404</a></li>
<li><a href="#" class="text-dark">تماس با ما</a></li>
<li><a href="#" class="text-dark">درباره ما</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-4 col-xl-2 d-flex align-items-center justify-content-end">
<input type="checkbox" id="dark_light" hidden>
<label for="dark_light">
<span class="fas fa-moon" id="darkmode_moon"></span>
<span class="fas fa-sun" id="darkmode_sun"></span>
</label>
<button type="button" class="mx-2 me-md-4 ms-md-3 darkmode_btn_toggle" data-bs-toggle="modal" data-bs-target="#search_modal"
id="search_btn">
<span class="fas fa-search"></span></button>
<div class="modal fade " id="search_modal">
<div class="modal-dialog modal-dialog-centered ">
<div class="modal-content ">
<div class="modal-header">
<h2 class="" >برای جستجو تایپ کنید:</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
</div>
<div class="modal-body">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
</body>
<script src="js/script.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</html>
and this is the css:
*{
margin: 0;
padding: 0;
}
@font-face {
font-family: 'IRANSansX';
src: url('../font/IRANSansXRegular.ttf')format('truetype');
}
@font-face {
font-family: 'IRANSansXBold';
src: url('../font/IRANSansXBold.ttf')format('truetype');
}
body{
font-family: 'IRANSansX';
background-color: rgb(244, 242, 242);
}
.the_bg_red{
background-color: #EF233C;
}
.the_txt_red{
color: #EF233C;
}
ul{
list-style-type: none;
}
/* -------------------------------dark mode ------------ */
.darkmode{
background-color: rgb(34, 33, 33) !important;
}
.darkmode .darkmode_btn_toggle{
background-color: #cf021a !important;
color: white !important;
}
/* ---------------------------------- */
.top_bar {
height: 35px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #00000012;
}
.top_bar p{
margin-top: 10px;
font-size: small;
}
.social {
margin-left: -30px;
}
.social li {
margin-top: 15px;
}
.social li svg{
font-family: 'IRANSansXBold'!important;
font-size: 16px;
margin-right: 10px;
color: white;
}
/* ---------------------------------- */
.bars_btn{
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
}
nav{
height: 90px;
}
.logo{
background-position: center;
background-size: cover;
box-sizing: border-box !important;
}
.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;
}
/* -----------------li life----------------- */
.li_life{
position: relative;
}
.submenu_life{
background-color: white;
height: auto;
min-width: 160px;
position: absolute;
display: none;
top: 10vh;
border-radius: 15px;
transition: all 0.5s ease;
}
.li_life:hover .submenu_life{
display: block;
top: 5vh;
}
/* ---------------------li tec------------------- */
.li_tec{
position: relative;
}
.submenu_tec{
background-color: white;
height: auto;
min-width: 160px;
position: absolute;
display: none;
top: 10vh;
border-radius: 15px;
transition: all 0.5s ease;
}
.li_tec:hover .submenu_tec{
display: block;
top: 5vh;
}
/* --------------------li vij------------- */
.li_vij{
position: relative;
}
.submenu_vij{
background-color: white;
height: auto;
min-width: 160px;
position: absolute;
display: none;
top: 10vh;
border-radius: 15px;
transition: all 0.5s ease;
}
.li_vij:hover .submenu_vij{
display: block;
top: 5vh;
}
/* ----------search */
#search_btn{
background-color: white;
border-radius: 7px;
border: none;
width: 35px;
height: 35px;
justify-content: center;
align-items: center;
display: flex;
}
/* ----------dark_light */
#darkmode_sun{
display: none;
cursor: pointer;
color: rgb(255, 213, 0);
}
#darkmode_moon{
display: block;
cursor: pointer;
color: rgb(234, 232, 232);
}
#dark_light:checked + label .fa-sun {
display: block;
}
#dark_light:checked + label .fa-moon {
display: none;
}