панель навигации начальной загрузки не отображается на мобильных устройствах

Привет, Я разработал простой веб-сайт с навигационной панелью начальной загрузки, которую можно свернуть на мобильных устройствах.

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

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

Мой сайт здесь - Syl.VIA - Zdrowe Żywienie i Dietoterapia

.

HTML:

 @import url([URL='https://lumtu.com/yti/M5ww5MDBodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9U291cmNlK1NhbnMrUHJvOjQwMCwQj']https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900[/URL]);


.navbar {


background-color: #0ac530;


}


.navbar .navbar-brand {


font-size: 1.5em;


color: #000000;


}


.navbar .navbar-brand:hover,


.navbar .navbar-brand:focus {


font-size: 1.5em;


color: #000000;


}


.navbar .navbar-text {


font-size: 1.5em;


color: #000000;


}


.navbar .navbar-nav .nav-link {


font-size: 1.5em;


color: #000000;


border-radius: .25rem;


margin: 0 0.25em;


}


.navbar .navbar-nav .nav-link:not(.disabled):hover,


.navbar .navbar-nav .nav-link:not(.disabled):focus {


color: #000000;


}


.navbar .navbar-nav .nav-item.active .nav-link,


.navbar .navbar-nav .nav-item.active .nav-link:hover,


.navbar .navbar-nav .nav-item.active .nav-link:focus,


.navbar .navbar-nav .nav-item.show .nav-link,


.navbar .navbar-nav .nav-item.show .nav-link:hover,


.navbar .navbar-nav .nav-item.show .nav-link:focus {


color: #000000;


background-color: #11cc05;


}


.navbar .navbar-toggle {


border-color: #11cc05;


}


.navbar .navbar-toggle:hover,


.navbar .navbar-toggle:focus {


background-color: #11cc05;


}


.navbar .navbar-toggle .navbar-toggler-icon {


color: #000000;


}


.navbar .navbar-collapse,


.navbar .navbar-form {


border-color: #000000;


}


.navbar .navbar-link {


color: #000000;


}


.navbar .navbar-link:hover {


color: #000000;


}


[USER=124521]@media[/USER] (max-width: 575px) {


.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {


color: #000000;


}


.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,


.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {


color: #000000;


}


.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {


color: #000000;


background-color: #11cc05;


}


}


[USER=124521]@media[/USER] (max-width: 767px) {


.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {


color: #000000;


}


.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,


.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {


color: #000000;


}


.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {


color: #000000;


background-color: #11cc05;


}


}


@media (max-width: 991px) {


.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {


color: #000000;


}


.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,


.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {


color: #000000;


}


.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {


color: #000000;


background-color: #11cc05;


}


}


[USER=124521]@media[/USER] (max-width: 1199px) {


.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {


color: #000000;


}


.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,


.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {


color: #000000;


}


.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {


color: #000000;


background-color: #11cc05;


}


}


.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {


color: #000000;


}


.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,


.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {


color: #000000;


}


.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {


color: #000000;


background-color: #11cc05;

Код (разметка): CSS:

  <nav class="navbar navbar-expand-lg navbar-default navbar-default-edit fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="img/logo2.png" width="136" height="60" alt="логотип"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <!-- <li class="nav-item active"> <a class="nav-link" href="#"><b>Strona Główna</b> <span class="sr-only">(current)</span> </a> </li> --> <li class="nav-item"> <a class="nav-link" href="#stronaglowna"><b>Strona Główna</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#omnie"><b>O Mnie</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#cennik"><b>Cennik</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#wizyta"><b>Wizyta</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#certyfikaty"><b>Certyfikaty</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#edieta"><b>E-dieta</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#kontakt"><b>Kontakt</b></a> </li> </ul> </div> </div> </nav>

Код (разметка): Спасибо.

Извините, похоже, вы используете Bootstrap 4.0, а не 3.x. Попробуйте это, если это работает, просто измените его в соответствии со своими потребностями.

 <nav class="navbar navbar-expand-lg navbar-light bg-light">


<a class="navbar-brand" href="#">Navbar</a>


<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">


<span class="navbar-toggler-icon"></span>


</button>


<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav mr-auto">


<li class="nav-item active">


<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>


</li>


<li class="nav-item">


<a class="nav-link" href="#">Link</a>


</li>


<li class="nav-item">


<a class="nav-link disabled" href="#">Disabled</a>


</li>


</ul>


</div>


</nav>

Код (разметка):

Ах, такой прекрасный пример того, что такое некомпетентная чушь.

На самом деле все меню состоит из сценариев, выполняющих работу CSS, бесконечных бессмысленных классов и т. д., и т. д., и т. п. Ничего подобного 2,3 тыс.

наценки, чтобы сделать половину работы К. Конечно, это значительно облегчило разработку страницы.

Черт возьми, селекторы ОДИН только для применения пользовательских цветов больше, чем CSS, необходимый для написания меню без буткрана! Пойди найди палку, чтобы соскрести это.

Глядя на ваш код, вам не хватает:

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">


<span class="navbar-toggler-icon"></span>


</button>

HTML: Внутри:

  <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>

Код (разметка):

Итак, это должно быть что-то вроде:

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">


<span class="navbar-toggler-icon"></span>


<span class="icon-bar"></span>


<span class="icon-bar"></span>


<span class="icon-bar"></span>


</button>

HTML: Я попробовал это, и это не работает.