#bootstrap-4 #navbar #collapse #hamburger-menu
Вопрос:
Я пытаюсь заставить этот гамбургер игнорировать мою корзину покупок и кнопки входа в систему. Я принудительно свернул представление меню на всех размерах экрана в этом фрагменте, чтобы вы могли видеть, что оно работает не так, как я хочу.
Что я хочу: A. Для размеров экрана xs: Нажмите на гамбургер, и ссылки «Главная страница», «Коллекции» и «Категории» выпадут, но логотип (губка Боб в качестве заполнителя), кнопка входа в систему и корзина останутся вверху. B. Для размеров экрана sm-xl: Логотип, Главная страница, Категории, Коллекции (затем справа), Вход, Корзина.
Все работает так, как я хочу, за исключением того, что Корзина и Логин выпадают вместе с гамбургером, а не остаются сверху с логотипом.
Причина, по которой логотип остается сверху, заключается в том, что логотип написан перед div, который инициирует сворачивание (id=»oaNavbar»). Этот раздел содержит неупорядоченный список элементов навигации.
Проблема в том, что ВСЕ, что я добавляю ПОСЛЕ того, КАК неупорядоченный список попадает в раскрывающийся список гамбургеров. Я хочу, чтобы логин и корзина оставались наверху.
Вы можете сказать: «Просто переместите кнопки корзины и входа в систему в область перед «oaNavbar», потому что там находится логотип, и он ведет себя». Проблема в том, что на больших экранах действительно отвратительно выглядит наличие логотипа, Логина, Корзины, Дома, Коллекций, Категорий.
Есть ли какой-нибудь способ получить корзину и войти в систему, чтобы оставаться на месте?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<!-- Additional CSS must be placed after Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />
<link rel="stylesheet" href="node_modules/bootstrap-icons/package.json">
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|Open Sans" /> -->
<link rel="stylesheet" href="css/styles.css" />
<title>Document</title>
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-expand-xl navbar-light bg-white sticky-top ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#oaNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#"><img src="https://clipground.com/images/spongebob-png-icons-8.jpg" width="50" style="padding-left: 12px" /></a>
<div class="collapse navbar-collapse" id="oaNavbar">
<ul class="navbar-nav" style="padding-left: 5px">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="collections.html"> Collections</a></li>
<li class="nav-item"><a class="nav-link" href="categories.html"> Categories</a></li>
</ul>
</div>
<!-- Login button -->
<div class="navbar-text ml-auto">
<button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>
</div>
<!-- Shopping Cart -->
<a class="btn" href="cart.html"><img src="https://clipground.com/images/icon-cart-clipart-2.jpg" style="width: 30px"></a>
</nav>
<!-- styling links -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html> Ответ №1:
Я добавил «col-sm-2 с фиксированным верхом» во второй раздел.
<!-- Login button -->
<div class="navbar-text ml-auto col-sm-2 fixed-top">
<button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal"
data-target="#loginModal">Login</button>
<!-- Shopping Cart -->
<a class="btn" href="cart.html"><img src="https://clipground.com/images/icon-cart-clipart-2.jpg"
style="width: 30px"></a>
</div>
Ответ №2:
Я понял это с помощью Вишванатхи Свами.
К сожалению, фиксированный верх col-sm-2 сделал некоторые нежелательные вещи, такие как слишком далеко сдвинул мою тележку и кнопку входа в систему, а также некоторые странные вещи, связанные с контейнерами разных размеров. Но он исправил кнопки на внешней стороне гамбургера.
Я посмотрел на CSS, стоящий за col-sm-2 и фиксированным верхом Bootstrap. В итоге я написал свой собственный CSS, чтобы исправить это.
Я завернул обе кнопки в один div и добавил этот CSS:
.loginFixed {
position: fixed;
top: 0;
right: 0;
left: auto;
z-index: 1030;
margin-top: 15px;
}
Мне нужна была верхняя часть поля, потому что фиксированное значение top: 0 приводит к хлюпанию в САМОМ верху, а любое значение top приводит к тому, что кнопки падают вместе с гамбургером.
Я добавил верхнюю часть поля, чтобы компенсировать верхнюю часть: 0 герметичности.
Окончательная настройка кнопки выглядит так в HTML:
<div class="navbar-text loginFixed">
<button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>
<a class="btn" href="cart.html"><i class="fa fa-shopping-cart fa-lg"></i></a>
</div>
И все меню выглядит так:
<nav class="navbar navbar-expand-sm navbar-light bg-white sticky-top ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#oaNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#"><img src="img/logo-md-white.png" width="180" style="padding-left: 12px"/></a>
<div class="collapse navbar-collapse" id="oaNavbar">
<ul class="navbar-nav" style="padding-left: 5px">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="collections.html"> Collections</a></li>
<li class="nav-item"><a class="nav-link" href="categories.html"> Categories</a></li>
</ul>
</div>
<div class="navbar-text loginFixed">
<button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>
<a class="btn" href="cart.html"><i class="fa fa-shopping-cart fa-lg"></i></a>
</div>
</nav>