html - Bootstrap Navigation 移动版 - wordpress

Question

在缩小移动响应菜单的浏览器大小时，我无法让导航正常工作。我已经尝试了尽可能多的事情。下面是我的导航代码，链接是http://proof.waxedmedia.co.za/gavinerwin/请你帮我让它看起来正确!

<div class="navbar-header container-fluid">
            <div class="container">
                <div class="row">
                    <div class="col-xs-4 col-sm-6 col-md-4 col-lg-4">
                        <a href="/"><img src="<?php bloginfo('template_url'); ?>/images/Gav_Sig1.png" alt="signature" class="img-responsive"></a>
                    </div>
                    <div class=" col-xs-6 col-sm-offset-0 col-sm-6 col-md-offset-2 col-md-6 col-lg-offset-2 col-lg-6 ">
                        <nav class="navbar navbar-default" role="navigation">
                            <div class="row main-nav">
                                <!-- Toggle get grouped for better mobile display -->
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>

<!-- Collect the nav links for toggling -->
                                <div class="collapse navbar-collapse navbar-ex1-collapse">
                                    <?php
                                    wp_nav_menu(array(
                                        'menu' => 'Main Nav Menu',
                                        'depth' => 2,
                                        'theme_location' => 'primary',
                                        'container_class' => 'collapse navbar-collapse',
                                        'container' => false,
                                        'menu_class' => 'menu',
                                        'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                                        'walker' => new wp_bootstrap_navwalker(),
                                    ));
                                    ?>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

Answer 1

CSS:

@media (max-width: 767px){
.row ul, .row ul li, .row ul li a {
    padding: 5px 0;
    font-size: 1.14em;
    display: block;
}
}

HTML :您将 .col-xs-4 和 .col-xs-6 放在 行 中。我已将 .col-xs-6 更改为 col-xs-8 以便更好地放置汉堡包菜单图标。

<div class="navbar-header container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-sm-6 col-md-4 col-lg-4">
        <a href="/"><img src="http://proof.waxedmedia.co.za/gavinerwin/wp-content/themes/gavinerwin/images/Gav_Sig1.png" alt="signature" class="img-responsive"></a>
      </div>
      <div class=" col-xs-8 col-sm-offset-0 col-sm-6 col-md-offset-2 col-md-6 col-lg-offset-2 col-lg-6 ">
        -------
        ------
      </div>
    </div>
  </div>

希望对您有所帮助。