我将静态HTML5网站与Wordpress连接在一起，但仍然有一个问题需要解决。我用Bootstrap 4创建了网站，我的导航栏在PC上运行良好，但是当涉及到小型设备时，导航栏将其位置和形式更改为“响应移动版”，所以里面没有菜单。
Result on small screen devices
这是我来自静态站点的代码：
<!-- 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>