如何将 wordpress header 导航按版本 Php 文件并排分开？

Question

我想把我的 WordPress 菜单导航分成左右两部分，我把菜单功能放到 "functions.php" 中，从后台添加菜单，前端将由 "header.php", 但我无法检索到结果，有人可以帮助我吗？

我的function.php:

register_nav_menus( array(
'primary' => __( 'Primary Menu', 'unite' ),
'footer-links' => __( 'Footer Links', 'unite' ), 
'secondary' => __( 'Secondary Menu','unite' )// secondary nav in footer
    ) );

我的header.php:

<nav class="navbar navbar-default" role="navigation">
<div class="container">
<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>
<?php
wp_nav_menu( array(
'theme_location'    => 'primary',
'depth'             => 2,
'container'         => 'div',
'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
'menu_class'        => 'nav navbar-nav',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker())
                    );

wp_nav_menu( array(
'theme_location'    => 'secondary',
'depth'             => 2,
'container'         => 'div',
'container_class'   => 'collapse navbar-collapse navbar-ex2-collapse',
'menu_class'        => 'nav navbar-nav',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker())
                    );
?>
</div>
</nav><!-- .site-navigation -->

我的后端设置：-

我的布局现在看起来如何：-

我希望二级菜单紧挨着主菜单：-

Answer 1

试试这个并把 css

.fullWidth{
    width : 100%;
    margin : 0 auto;
}

.leftClass{
    width : 75%;
    float : left;
}

.rightClass{
    width : 25%;
    float : right;
}

在 div 标签中添加 class

 <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <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>

             <div class="fullWidth">

               <div class="leftClass">
                <?php
                    wp_nav_menu( array(
                        'theme_location'    => 'primary',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    ); ?>
                </div> <!-- end leftClass -->

                <div class="rightClass">
                   <?php wp_nav_menu( array(
                        'theme_location'    => 'secondary',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_class'   => 'collapse navbar-collapse navbar-ex2-collapse',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>
              </div><!-- end rightClass -->
              <div style="clear:both;"></div><!-- clear both left and right -->
             </div><!-- end fullWidth -->
            </div>



        </nav><!-- .site-navigation -->

Answer 2

非常简单

将以下代码放在放置这些菜单的页眉中

<nav class="navbar navbar-default" role="navigation">
<div class="container">
<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>

<div class="topmenu"> 
<div class="top-menu-left"> 

<?php
wp_nav_menu( array(
'theme_location'    => 'primary',
'depth'             => 2,
'container'         => 'div',
'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
'menu_class'        => 'nav navbar-nav',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker())
);
?>

</div><!--left menu end-->
<div class="top-menu-right"> 

<?php
wp_nav_menu( array(
'theme_location'    => 'secondary',
'depth'             => 2,
'container'         => 'div',
'container_class'   => 'collapse navbar-collapse navbar-ex2-collapse',
'menu_class'        => 'nav navbar-nav',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker())
);
?>

</div><!--right menu end-->
</div><!--menu wrap-->

</div>
</nav><!-- .site-navigation -->

然后把下面的代码放到你的 themes/themename/style.css

.topmenu{width: 1000px;margin: 0 auto;padding-bottom: 28px;}
.top-menu-left{float:left;margin-left: 20px;width:70%;}
.top-menu-right{float:right;margin-right: 20px;width:28%;}

如何将 wordpress header 导航按版本 Php 文件并排分开？

How to seperate wordpress header navigation into side to side by edition Php files?

css

php

navigation

wordpress

header