я столкнулся с проблемой с меню на адаптивных устройствах, я новичок в интерфейсе разработчика, и мне нужна небольшая помощь, у меня есть этот код navbar:
<nav class="navbar header-top fixed-top navbar-expand-lg navbar-dark bg-dark">
<span class="navbar-toggler-icon leftmenutrigger" id="open"></span>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav animate side-nav">
<li class="nav-item menu-item close-btn">
<a class="nav-link menu" href="#">Menu
<span class="sr-only">(current)</span>
</a>
<div class="text-right">
<div class="" id="close"><i class="fa fa-times d-none d-lg-block testing"></i></div>
</div>
</li>
<li class="nav-item menu-item">
<a class="nav-link menu" href="home.php">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item menu-item">
<a class="nav-link menu" href="#">Side Menu Items</a>
</li>
<li class="nav-item menu-item">
<a class="nav-link menu" href="#">follow <b>short7 </b>on social media:<i
class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
<div class="col-lg-10 text-center search-size">
<div class="searchContainer">
<i class="fa fa-search searchIcon"></i>
<input class="searchBox" type="search" name="search" placeholder="Search...">
<button class="search-right-arrow"><i class="fa fa-angle-right search-arrow"></i></button>
</div>
</div>
<ul class="nav navbar-nav ml-md-auto d-md-flex">
<li class="nav-item uploadVideo">
<a class="nav-link" href="#"><i class="fa fa-upload notification"></i>
</a>
</li>
<li class="bell">
<div class="dropdown">
<button class="dropdown-toggle notification" type="button" data-toggle="dropdown"><i
class="fa fa-bell"></i>
<ul class="dropdown-menu dropdownNotification">
<li class="notificationDisplay"><p class="fname">
<img src="assets/img/avatar.png"
class="img-responsive profile-dropdown img-circle"></p>
<span
class="nameStyle"><b><u>eddy abikhalil</u></b> liked your <b><u>video</b></u></span>
<i class="fa fa-heart heart"></i>
<span class="uploadTime">Today at 8:00PM</span>
</li>
<li class="notificationDisplay"><p class="fname">
<img src="assets/img/avatar.png"
class="img-responsive profile-dropdown img-circle"></p>
<span
class="nameStyle"><b><u>eddy abikhalil</u></b> liked your <b><u>video</b></u></span>
<i class="fa fa-heart heart"></i>
<span class="uploadTime">Today at 8:00PM</span>
</li>
<li class="notificationDisplay">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-11">
<div class="fname">
<img src="assets/img/avatar.png"
class="img-responsive profile-dropdown img-circle">
</div>
<div class="nameStyle">
<b><u>eddy abikhalil</u></b> commented on your
<b><u>video</b></u>
<div class="uploadTime">Today at 8:00PM</div>
</div>
</div>
<div class="col-lg-1">
<div class="row">
<i class="fa fa-heart heart"></i>
</div>
</div>
</div>
</div>
</li>
<li class="notificationDisplay">
<p class="fname">
<img src="assets/img/avatar.png"
class="img-responsive profile-dropdown img-circle"></p>
<span class="nameStyle"><b><u>eddy abikhalil</u></b> liked your <b><u>video</b></u></span>
<i class="fa fa-heart heart"></i>
<span class="uploadTime">Today at 8:00PM</span>
</li>
</ul>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link profile-pic dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="assets/img/avatar.png" id="profile"
class="img-responsive profile-dropdown img-circle">
</a>
<ul class="navbar-navs animate side-navs profile">
<li class="nav-item close-btn">
<img src="assets/img/avatar.png" id="profile"
class="img-responsive profile-dropdown img-circle">
<span class="profile-name">Hello, Eddy</span>
<div class="text-right">
<div id="close-profile"><i class="fa fa-times"></i></div>
</div>
</li>
<li class="nav-item menu-item">
<a class="nav-link links" href="#">view profile
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item menu-item">
<a class="nav-link" href="#">history</a>
</li>
<li class="nav-item menu-item">
<a class="nav-link" href="#">settings</a>
</li>
<li class="nav-item menu-item">
<a class="nav-link" href="#">sign out</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
моя проблема в том, что на маленьких устройствах меню непрокрутка ... есть идеи?я попытался установить высоту как авто и переполнение и все еще не работает, и я новичок в этом
спасибо заранее