Как исправить баг с прокруткой в Boostratp 5.0.2?
<nav class="navbar navbar-dark offcanvas-navbar" style="z-index: 9990;" >
<div class="container-fluid">
<button class="navbar-toggler bg-dark" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-start text-dark" tabindex="-1" id="offcanvasNavbarDark"
aria-labelledby="offcanvasNavbarDarkLabel">
<div class="offcanvas-header bg-dark">
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
</div>
<div class="offcanvas-body bg-light">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active text-dark" aria-current="page" href="#project-overview">Project
Overview</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#our-team">Our Team</a>
</li>
<li class="nav-item">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown"
style="font-size: 13px;">Documentation
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Technical Documentation</a></li>
<li><a href="#">Ethics & Responsibility</a></li>
<li><a href="#">Licensing & Contribution</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
Проблема заключается в том, что я когда нажимаю на иконку навбара слева сверху, все открывается, но как только я начинаю закрывать его, меня перелистывает на вверх сайта и он больше не крутиться вообще. Работает некоректно, бывает открывается и дергается, а без z-index он вообще не открывается, не имею даже представления, как это как исправить.
Использую Bootstrap 5.0.2. Возможно сверстал неправильно вернюю часть сайта, и теперь какие-то стили мешают работать этому навбару, но не могу понять и найти их. Помогите, пожалуйста, разобраться в чём проблема
Ответы (1 шт):
Автор решения: darinka poznyak
→ Ссылка
Вот рабочий вариант Вашего примера
<!doctype html>
<html lang="ru">
<head>
<!-- Обязательные метатеги -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Привет мир!</title>
</head>
<body>
<div class="container-fluid">
<a class="btn btn-dark" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header bg-dark">
<button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
<div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Project Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Team</a>
</li>
</ul>
</div>
<div class="dropdown mt-2">
<button class="btn btn-outline-none dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">Documentation
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Technical Documentation</a></li>
<li><a class="dropdown-item" href="#">Ethics & Responsibility</a></li>
<li><a class="dropdown-item" href="#">Licensing & Contribution</a></li>
<li><a class="dropdown-item" href="#">Privacy Policy</a></li>
<li><a class="dropdown-item" href="#">Terms & Conditions</a></li>
</ul>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>Но, если есть возможность, то есть возможность, т.е. если Вы только начали верстать сайт, то рекомендую использовать более новую версию bootstrap. Хотя бы 5.1, а то и выше, там больше функционал. Вот, например, Ваша навигационная панель версии 5.1
<!doctype html>
<html lang="ru">
<head>
<!-- Обязательные метатеги -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Привет мир!</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-light bg-dark fixed-top">
<div class="container-fluid">
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header bg-dark">
<h5 class="offcanvas-title text-white" id="offcanvasNavbarLabel">Menu</h5>
<button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body bg-light">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Project Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Team</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Documentation
</a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
<li><a class="dropdown-item" href="#">Technical Documentation</a></li>
<li><a class="dropdown-item" href="#">Ethics & Responsibility</a></li>
<li><a class="dropdown-item" href="#">Licensing & Contribution</a></li>
<li><a class="dropdown-item" href="#">Privacy Policy</a></li>
<li><a class="dropdown-item" href="#">Terms & Conditions</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>