Блог

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

Это навигационный код

 <nav class="navbar navbar-expand-md navbar-dark fixed-top">
    <a class="navbar-brand font-orbitron" href="/">
        <img src="/static/images/binoculars.png" alt="Logo" class="nav-logo">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExample">
        <ul class="navbar-nav mr-auto">
            
                <li class="nav-item font-abeezee active">
                    <a class="nav-link" href="/" title="Kenya Professional Safari Guides Association">Home </a>
                    
                    
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/about-us" title="About Us">About Us </a>
                    
                    
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/gallery" title="Gallery">Gallery </a>
                    
                    
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/careers" title="Careers">Careers </a>
                    
                    
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/contact-us" title="Contact Us">Contact Us </a>
                    
                    
                </li>
            
        </ul>
    </div>
</nav>
 

и импорт

 <script src="/static/js/jquery-3.5.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
 

для начальной загрузки 5

также

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 

код области просмотра

Вам не нужно включать jQuery, если вы используете bootstrap V5.0, Как вы написали, вы используете bootstrap версии 5. Я рассматриваю, что вы используете bootstrap v5.0

Первая ошибка в вашем <button>...</button> коде.

Изменить

• data-toggle Для data-bs-toggle
• data-target Для data-bs-target

Ваш data-bs-target должен быть точно таким, как id указано div выше ul

Замените свой <button>...</button> код следующим

     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample" aria-controls="navbarsExample" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
    </button>