Меню гамбургера Bootstrap не применяет фон при нажатии

Я пытаюсь понять, как у меня может быть белый фон при нажатии меню гамбургера, когда область просмотра страницы находится в режиме планшета или мобильного устройства.

То, чего я пытаюсь достичь эстетически, - это когда нажимается меню гамбургера, измените цвет логотипа, заголовка, навигационных ссылок и кнопки меню на черный и придайте всему этому белый фон вместо того, что есть в настоящее время, см. -сквозной/прозрачный.

Единственный раз, когда мне нравится, чтобы все в панели навигации было белым, это вид рабочего стола.

Спасибо!

/* 

 green: #009688
 brown: #674A48
 off-white: #f8f9fa - text
 black: #212529;


 baby blue: #53B4EB - For winter tabs
 orange: #FF9900 - For summer/fall tabs
 yellow: #FFC700 - For summer tabs

*/

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
    font-size: 1rem;
    font: inherit;
    vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

p {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    letter-spacing: .25px;
    font-weight: 300;
}

/*************************
HERO / LANDING PAGE SECTION
**************************/

/* Use psuedo class to apply filter onto image otherwise the brightness filter will also apply to text */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    background: url("/img/hero/hero-zion.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: brightness(90%);
}

.hero-content {
    content: "";
    position: absolute;
    bottom: 15%;
    left: 10%;
    width: 100%;
    height: 420px;
}

.hero-content .hero-title {
    color: #f8f9fa;
    font-size: 70px;
    margin-bottom: .3em;
    line-height: 77px;
    letter-spacing: 1px;
    text-shadow: -1px 2px 5px rgb(29 37 45 / 65%);
}

.hero-content .hero-desc {
    color: #f8f9fa;
    margin-bottom: 2em;
    width: 52ch;
    font-weight: 400;
    text-shadow: -1px 2px 5px rgb(29 37 45 / 100%);
}

.hero-content .hero-button {
    background-color: #009688;
    border-radius: 20px 20px 2px 20px;
    color: #f8f9fa;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 10px 5px 10px 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 255px;
    text-shadow: -1px 2px 5px rgb(29 37 45 / 0.50);
}

.hero-button:hover {
    border-radius: 100px;
    transition: all .6s ease-in-out;
}

/*************************
       NAVIGATION BAR
**************************/

.navbar {
    height: 12vh;
}

.navbar-brand {
    font-size: 3rem;
    display: flex;
}

.navbar img {
    height: 55px;
    width: 55px;
}

.navbar-brand h2 {
    display: flex;
    align-items: center;
    padding-left: .2em;
    text-shadow: -1px 2px 5px rgb(29 37 45 / 0.10);
}

#navbarToggle > ul > li {
    padding: .8em;
}

#navbarToggle > ul > li > a {
    color: #f8f9fa;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: -1px 2px 5px rgb(29 37 45 / 20%);
}

#navbarToggle > .navbar-nav > .nav-item > .nav-link:hover {
    border-top: 2px solid #f8f9fa;
    margin-top: -2px;
}

.guided-tours-link a::before {
    content: "\f5eb";
    font-family: "Font Awesome 5 Free";
    padding: 0 10px 0 0;
    font-size: 1.2rem;
}

.visit-us-link a::before {
    content: "\f4d7";
    font-family: "Font Awesome 5 Free";
    padding: 0 10px 0 0;
    font-size: 1.2rem;
}

.about-us-link a::before {
    content: "\f1e5";
    font-family: "Font Awesome 5 Free";
    padding: 0 10px 0 0;
    font-size: 1.2rem;
}

.bookings-link a::before {
    content: "\f07a";
    font-family: "Font Awesome 5 Free";
    padding: 0 10px 0 0;
    font-size: 1.2rem;
}

.account-link a::before {
    content: "\f2bd";
    font-family: "Font Awesome 5 Free";
    padding: 0 10px 0 0;
    font-size: 1.2rem;
}

<!doctype html>
<html lang = "en">
  <head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <link rel = "stylesheet" href = "css/main-styles.css">
    <link rel = "stylesheet" href = "css/media-queries/mq.css">
    <link href = "/fontawesome-free-5.15.1-web/css/all.min.css" rel = "stylesheet"><!--load all styles -->


    <!-- Bootstrap CSS -->
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">

     <!-- google fonts -->
     <link rel = "preconnect" href = "https://fonts.gstatic.com">
     <link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Playfair+Display:wght@400;500;600;700;800&display=swap" rel = "stylesheet">
 
     <title>Explore Zion</title>
  </head>
  <body>
      <div class = "container-fluid">
        <header class = "hero">
             <!-- navigation bar w/ bootstrap -->
             <nav class = "navbar navbar-expand-lg navbar-dark">

                <!--  show this only on mobile to medium screens  -->
                <a class = "navbar-brand" href = "#">
                    <img src = "/img/icons/main-logo.svg" width = "30" height = "30" class = "p-d-inline-block align-top" alt = "">
                    <h2>Explore Zion</h2>
                </a>

                  <button class = "navbar-toggler " type = "button" data-toggle = "collapse" data-target = "#navbarToggle" aria-controls = "navbarToggle" aria-expanded = "false" aria-label = "Toggle navigation">
                    <span class = "navbar-toggler-icon"></span>
                  </button>
                
                <!--  use flexbox utility classes to change how the child elements are justified  -->
                  <div class = "collapse navbar-collapse justify-content-between nav-link-container" id = "navbarToggle">

                    <!--   show this only lg screens and up   -->
                    <span></span>
    
                    <ul class = "navbar-nav nav-links-middle">
                      <li class = "nav-item guided-tours-link">
                        <a class = "nav-link active" href = "#">Guided Tours In Zion</a>
                      </li>
                      <li class = "nav-item visit-us-link">
                        <a class = "nav-link" href = "#">Visit Us</a>
                      </li>
                      <li class = "nav-item about-us-link">
                        <a class = "nav-link" href = "#">About Us</a>
                      </li>
                    </ul>
                    
                    <ul class = "navbar-nav nav-links-right">
                      <li class = "nav-item bookings-link">
                        <a class = "nav-link" href = "#">Bookings
                        </a>
                      </li>
                      <li class = "nav-item account-link">
                        <a class = "nav-link" href = "#">Account</a>
                      </li>
                    </ul>
                  </div>
                </nav>
            
            <!-- hero-content  -->
            <div class = "hero-content">
                <h1 class = "hero-title">
                    Zion Park <br/>Adventure Agency
                </h1>
                <p class = "hero-desc">
                    Planning your first visit to Zion? Let us help to make your trip safe and astounding. We offer a broad and exciting range of walking tours in Zion for all skill levels.
                </p>
                <a href = "#" target = "_blank" class = "hero-button">Private Guided Tours In Zion</a>
            </div>
        </header>

        <!-- introisection -->

      </div>


     <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>

    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
   
  </body>
</html>

Как мы собираемся решить вашу проблему, если вы не поместите какой-либо воспроизводимый код

— 10.12.2020 04:02

Сделайте фрагмент и добавьте больше кода для решения вашей проблемы

— 10.12.2020 07:06

Извините за отсутствие кода, я думал, что HTML будет достаточно. Я только что обновил его, и, надеюсь, информации достаточно, чтобы увидеть проблему.

— 10.12.2020 08:18

html css bootstrap-4

10.12.2020 02:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

895

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Элемент .navbar-collapse получает класс show при его раскрытии, что помогло бы добавить соответствующие стили. Однако в вашем случае вам также необходимо стилизовать элемент .navbar, поэтому его список классов должен быть соответствующим образом обновлен. Здесь вы можете использовать события сворачивания Bootstrap, которые будут указывать, когда меню открыто.

<script>
    const navbar = $('nav.navbar');
    const navbarCollapse = $('.navbar-collapse');

    // Adding classes to indicate the navbar state
    navbarCollapse.on('show.bs.collapse', function () {
      navbar.addClass('expanded');
    });
    navbarCollapse.on('hide.bs.collapse', function () {
      navbar.removeClass('expanded');
    });
</script>

Затем осталось установить необходимые стили. Вот простая демонстрация медиа-запроса, но я думаю, что вы можете пропустить сам медиа-запрос. Функция сворачивания доступна только для небольших экранов, а это означает, что обработчики событий будут устанавливать класс expanded для навигации только тогда, когда вы используете планшет и мобильный телефон. Другими словами, вы бы все равно не расширили панель навигации на рабочем столе.

/* The media query and the max-width are just for demo */
@media only screen and(max-width:1024px){
    .navbar.expanded {
      background-color: white;
    }

    .navbar.expanded .navbar-collapse {
      background-color: white;
    }

    .navbar.expanded .navbar-toggler-icon{
      color: black;
    }

    .navbar.expanded h2{
      color: black;
    }

    .navbar.expanded #navbarToggle>ul>li>a{
      color: black;
    }
}

Из того, что я вижу в вашем коде, логотип и кнопка меню являются SVG, и вам, вероятно, придется переключать изображения в зависимости от состояния панели навигации или использовать код SVG в HTML, чтобы вы могли стилизовать их с помощью CSS.

Спасибо за ваше время и усилия по развенчанию моего кода. Это очень помогло!

— 11.12.2020 08:58

10.12.2020 11:48