Почему не отображается кнопка меню в Bootstrap???

Question

AtOM 288 @AtOM228

123

Bootstrap

Почему не отображается кнопка меню в Bootstrap???

При создании навбара, столкнулся с такой проблемой: когда убираю класс - navbar-dark или navbar-light пропадает кнопка меню(Тоглер). Как можно отобразить её обратно без добавления navbar-dark или navbar-light? Может быть в стилях?

Вопрос задан более трёх лет назад
474 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

AtOM 288 @AtOM228 Автор вопроса

Я так понимаю, вы имели ввиду сделать так:

.navbar-dark .navbar-toggler {
	color: green;
	border-color: green;
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5");
}

Но после этого значок так и не появился, зато появился бордер вокруг тогллера. Стиль цвета не изменяет даже цвет текста.

Вот код HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Recipes!</title>	
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
	<link href="img/logo.png" rel="icon" type="image/png" />
	<link rel="stylesheet" href="Style.css">    
</head>
<body class="backgr">
	
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
    <a href="Index.html" class="navbar-brand brand"><img src="img/logo.png" alt="Coock" class="logo">Recipe</a>
    <button class="navbar-toggler "data-toggle="collapse" data-target="#menu1">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu1">
    <ul class="navbar-nav">
      <li class="nav-item"><a href="Index.html" class="nav-link active">all recipes</a></li>
      <li class="nav-item"><a href="Hot_Dish.html" class="nav-link">hot dish</a></li>
      <li class="nav-item"><a href="Salad.html" class="nav-link">salad</a></li>
      <li class="nav-item"><a href="Pastry.html" class="nav-link">pastry</a></li>
    </ul>
    <form action="OBR.PHP" class="form-inline ml-auto">
    	<input type="text" class="form-control mr-sm-2" placeholder="Search">
    	<button class="btn btn-warning my-2 my-sm-0" type="submit">Search</button>
    </form>
    </div>
  </nav>

  <div class="container main">
  	<div class=row>
  		<div class="col-12">
  		  	<h1 class="text-center">All recipes</h1>
  		</div>
  	</div>

  	<div class="row">
  		<div class="col-4"><img src="img/images/soup.png" alt="soup"></div>
  		<div class="col-4"><img src="img/images/meat.png" alt=""></div>
  		<div class="col-4"><img src="img/images/desert.png" alt=""></div>
  	</div>

  	<div class="row">
  		<div class="col-4"><img src="img/images/vipechka.png" alt=""></div>
  		<div class="col-4"><img src="img/images/" alt=""></div>
  		<div class="col-4"><img src="img/images/" alt=""></div>
  	</div>

  	<div class="row">
  		<div class="col-4"><img src="img/images/" alt=""></div>
  		<div class="col-4"><img src="img/images/" alt=""></div>
  		<div class="col-4"><img src="img/images/" alt=""></div>
  	</div>

  </div>

  

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Как мне написать скрипт для вывода изображения bootstrap 5 и js?
- 1 подписчик
- 06 окт.
- 84 просмотра
2

ответа
Bootstrap

Простой
Как разместить sidebar в секции(заголовка)?
- 1 подписчик
- 30 сент.
- 69 просмотров
1

ответ
Bootstrap

Простой
Как сделать горизонтальную прокрутку таблицы Bootstrap 5?
- 1 подписчик
- 20 сент.
- 66 просмотров
2

ответа
React

+2 ещё

Простой
Почему появляется белый прямоугольник у кнопки google на заднем фоне при использовании темной темы от bootstrap?
- 1 подписчик
- 24 авг.
- 75 просмотров
0

ответов
HTML

+2 ещё

Простой
Как высчитать и собрать сетку галереи, без лишних пробелов?
- 1 подписчик
- 21 авг.
- 111 просмотров
0

ответов
Bootstrap

Простой
Можно ли в Bootstrap отдельно верстать элементы страницы для десктопа и отдельно для мобильных устройств — это не осуждается?
- 1 подписчик
- 08 авг.
- 76 просмотров
1

ответ
Bootstrap

Простой
В Bootstrap 3 для вёртки для мобильных устройств можно было использовать .col-xs-1, а что использовать вместо этого в Bootstrap 5?
- 1 подписчик
- 02 авг.
- 60 просмотров
1

ответ
Bootstrap

Простой
Почему вертикальный отступ gy-5 в bootstrap 5 не работает — то есть отступа не происходит?
- 1 подписчик
- 30 июл.
- 46 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему col-xl-10 не работает при указании col-md-8?
- 1 подписчик
- 28 июл.
- 70 просмотров
2

ответа
JavaScript

+3 ещё

Простой
Форма обратной связи не сохраняет данные. Присылает пустые письма. Выдает ошибку «Name is required Email is required Message is required». почему?
- 1 подписчик
- 28 июл.
- 143 просмотра
2

ответа
Показать ещё Загружается…

Ведущий разработчиĸ (FullStack) для разработки международного стартапа

ClickStar • Москва

от 350 000 до 500 000 ₽

Тестировщик с навыками разработчика SDET

Микро-ИТ

от 120 000 ₽

Fullstack Developer 🔥

Fundraise Up

от 3 800 до 6 500 $

Drupal. Перенос сайта с домена на поддомен

05 нояб. 2024, в 16:31

500 руб./за проект

Разработать макет для email рассылки

05 нояб. 2024, в 16:24

5000 руб./за проект

Виджет для OBS связанный с FaceIT

05 нояб. 2024, в 16:12

10000 руб./за проект

Answer 1 · 2019-04-18 11:49:05

Первый результат в гугле: stackoverflow
Если вкратце, стили тоглера привязаны к родителю navbar-light/navbar-dark, так что надо задать их с привязкой к своему классу:

.navbar-custom .navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5);
}

Почему не отображается кнопка меню в Bootstrap???

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт