Question

我第一次使用bootstrap并且在导航栏切换时遇到了困难。你如何设置切换菜单的样式？任何帮助将不胜感激。

html如下

＆＃13;

<nav class="navbar navbar navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                 <div class="site-branding">
                     <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                 </div><!-- .site-branding -->
             </div>
            <div id="navbar" class="navbar-collapse collapse ">
              <ul class="nav navbar-nav">
                <header id="masthead" class="site-header inner" role="banner">        
                    <nav id="site-navigation" class="main-navigation" role="navigation">
                        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'mandurah' ); ?></button>
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
                    </nav><!-- #site-navigation -->
                </header><!-- #masthead -->
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>

＆＃13;

Answer 1

有点不清楚你在问什么，但你会使用CSS进行样式化，你应该选择以下示例：

.navbar .navbar-collapse {
   background-color: #000;
}
.navbar .navbar-collapse > .nav > li {
   color: #ddd;
   font-weight: 700;
}

通过右键单击页面并从dropmenu中选择检查，使用浏览器的检查工具（或包含其他开发人员工具，每个Web浏览器都有一些库存）检查您的网站。

Answer 2

当您致电wp_nav_menu()时，它会显示您的导航菜单列表。

在wp_nav_menu()中，您可以传递多个参数，以便您可以根据需要自定义导航菜单。 Click here to get details about wp_nav_menu

menu-class - 应用于包含菜单项的ul元素的类。你必须在这里指定bootstrap类。

e.g。

$args = array(
'theme_location' => 'wdm_primary',
'fallback_cb'    => false,
'menu_class'     => 'nav navbar-nav navbar-right',
'walker'         => new My_Custom_Nav_Walker,
'depth'          => 1
);
wp_nav_menu( $args );

尝试一下，如果您遇到任何困难，请告诉我。

样式Navbar切换引导程序

2 个答案: