Я подключаю свой статический HTML5-сайт к Wordpress, но мне все еще предстоит решить проблему.Я создаю свой сайт с помощью Bootstrap 4, и моя навигационная панель хорошо работает на ПК, но когда дело доходит до небольших устройств и навигационная панель изменяют свою позицию и форму на отзывчивую мобильную версию, то внутри меню нет.
Результат на устройствах с маленьким экраном
Вот мой код со статического сайта:
<!-- Navigation -->
<nav class="navbar navbar-light bg-towary navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/banner.jpg" class="logo-main d-inline-block mr-1 align-bottom" alt="My site"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Navigation switch">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav w-75 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#"> HOME </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="submenu" aria-haspopup="true"> Page 2 </a>
<div class="dropdown-menu" aria-labelledby="submenu">
<a class="dropdown-item" href="#"> Subpage 1 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> Subpage 2 </a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Page 3 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Page 4 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Page 5 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Page 6 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Page 7 </a>
</li>
</ul>
<!-- Searchbar -->
<form class="form-inline w-25 justify-content-center">
<input class="form-control mr-1 w-50 xs-col-12" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light xs-col-12" type="submit">Search</button>
</form>
</div>
</div>
</nav>
И после Wordpress
<nav class="navbar navbar-light bg-towary navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" class="logo-main d-inline-block mr-1 align-bottom" alt="My site"></a>
<button class="navbar-toggler" type="button" data-toggle="dropdown" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Navbar switch">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav w-75 justify-content-center">
<div class="collapse navbar-collapse" id="mainmenu">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
<!-- Searchbar -->
<form class="form-inline w-25 justify-content-center">
<input class="form-control mr-1 w-50 xs-col-12" type="search" placeholder="Wyszukaj" aria-label="Wyszukaj">
<button class="btn btn-light xs-col-12" type="submit">Search</button>
</form>
</div>
</ul>
</div>
</nav>