我需要将我的菜单更改为响应式菜单

Question

我只是在我的模板中使用了 wordpress 导航菜单，我不想编辑 HTML 代码。我想把它变成响应式菜单，这样它就变成了移动设备上的下拉菜单。这是我正在使用的 HTML 和 CSS 代码。我现在只能编辑 CSS，无法再访问 HTML。

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
        <ul id="menu-menu-2" class="nav navbar-nav">
            <li class="hvr-underline-reveal menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-84 nav-item"><a title="Home" href="http://example.com/" class="nav-link">Home</a></li>
            <li class="hvr-underline-reveal menu-item menu-item-type-post_type menu-item-object-page menu-item-147 nav-item"><a title="ABOUT" href="http://example.com/about/" class="nav-link">ABOUT</a></li>
            <li class="hvr-float menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-437 nav-item"><a title="Leagues" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-437">Leagues<span class="downarrow"></span></a>
                <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-437" role="menu">
                    <li class="menu-item menu-item-type-post_type menu-item-object-sp_table menu-item-411 nav-item"><a title="Chiefs" href="http://example.com/table/chiefs/" class="dropdown-item">Chiefs</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142 nav-item"><a title="Kama'aina" href="http://example.com/leagues/kamaaina/" class="dropdown-item">Kama’aina</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143 nav-item"><a title="Keiki" href="http://example.com/leagues/keiki/" class="dropdown-item">Keiki</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-144 nav-item"><a title="Kings" href="http://example.com/leagues/kings/" class="dropdown-item">Kings</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-429 nav-item"><a title="Season Archives" href="http://example.com/season-archives/" class="dropdown-item">Season Archives</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-463 nav-item"><a title="Regular Season" href="http://example.com/regular-season/" class="dropdown-item">Regular Season</a></li>
                </ul>
            </li>
            <li class="hvr-underline-reveal menu-item menu-item-type-post_type menu-item-object-page menu-item-139 nav-item"><a title="GALLERY" href="http://example.com/gallery/" class="nav-link">GALLERY</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-119 nav-item">
                <a href="http://example.com" class="nav-link"><img src="http://example.com/wp-content/uploads/2017/11/logo.png" class="hvr-bounce-in" width="250px"></a>
            </li>
            <li class="hvr-underline-reveal menu-item menu-item-type-custom menu-item-object-custom menu-item-89 nav-item"><a title="Shop" href="#" class="nav-link">Shop</a></li>
            <li class="hvr-underline-reveal menu-item menu-item-type-post_type menu-item-object-page menu-item-137 nav-item"><a title="CONTACT" href="http://example.com/contact/" class="nav-link">CONTACT</a></li>
            <li class="hvr-underline-reveal menu-item menu-item-type-post_type menu-item-object-page menu-item-138 nav-item"><a title="FAQs" href="http://example.com/faqs/" class="nav-link">FAQs</a></li>
            <li class="hvr-underline-reveal menu-item menu-item-type-custom menu-item-object-custom menu-item-88 nav-item"><a title="Register" href="http://hoopshawaii.leagueapps.com/leagues" class="nav-link">Register</a></li>
        </ul>
    </div>
</div>
</nav>

Answer 1

我建议你使用引导程序，它真的让你的生活变得轻松，

但是，您可以使用媒体查询做一些技巧，创建两个菜单，主菜单，移动菜单，使用类似@media screen..main-menu display: none。

并显示移动菜单，您可以按照本教程创建移动菜单

http://www.wpbeginner.com/wp-themes/how-to-create-a-mobile-ready-responsive-wordpress-menu/