不同页面中的不同导航栏答案

【问题标题】：Different navbar in different page不同页面中的不同导航栏
【发布时间】：2017-05-03 09:07:56
【问题描述】：

我有一个导航栏，所有页面都可以通过 header.php 访问，但我需要不同的主页导航栏和其他页面的不同导航栏。

我通过 addidng css 使主页的导航栏绝对透明：

.navbar-inverse-blue .navbar-inner {
    padding: 7px 0;
    background: rgba(51, 51, 51, 0.3);
    border: none;
    font-size: 0.85em;
    position: absolute;
    z-index: 9999;
    width: 100%;
}

但在其他页面中，我想更改导航栏固定且不透明，为此我也有 css

.navbar-inverse-blue .navbar-inner {
padding: 7px 0;
border: none;
font-size: 0.85em;
z-index: 9999;
width: 100%;

}

这是我的 HTML 代码`

<div  id="nav-wrapper" data-spy="affix" data-offset-top="200"  class="navbar navbar-inverse-blue navbar">
<!--<div class="navbar navbar-inverse-blue navbar-fixed-top">-->
  <div class="navbar-inner">
    <div class="container">
       <div class="navigation">
         <nav id="colorNav">
           <ul>
            <li class="green">
                <a href="#" class="icon-home"></a>
                <ul>
                    <li><a href="login.html">Login</a></li>
                    <li><a href="register.html">Register</a></li>
                    <li><a href="index.html">Logout</a></li>
                </ul>
            </li>
           </ul>
         </nav>
       </div>
       <a class="brand" href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php header_image(); ?>" alt="logo"></a>
       <div class="pull-right">
        <nav class="navbar nav_bottom" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header nav_2">
          <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">Menu
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"></a>
       </div> 
       <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">


            <?php
        wp_nav_menu( array(
            'menu'              => 'primary',
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav nav_1',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
        );
    ?>
         </div><!-- /.navbar-collapse -->
        </nav>
       </div> <!-- end pull-right -->
      <div class="clearfix"> </div>
    </div> <!-- end container -->
  </div> <!-- end navbar-inner -->
</div>

但我不知道该把代码放在哪里。正如我在每个页面中调用 header.php 一样。

【问题讨论】：

根据你所在的页面给html或body元素一个类；然后在你的 CSS 选择器中使用它。
你愿意使用 jquery 吗？
这首先不应该是一个 CSS 问题。相反，在您的标题模板中，您应该检查您所在的页面（WordPress 具有 is_home 等功能），然后输出适当的菜单，仅此而已。
使用这个答案为你的身体添加类...然后根据父类编写css..stackoverflow.com/questions/33282929/…

标签： wordpress html css

【解决方案1】：

另一种方法是使用过滤器添加/删除菜单项：

add_filter("wp_nav_menu_items", "new_menu_items");

您可以完全删除所有菜单项并添加新菜单项，具体取决于您所在的页面。我的一个项目的小例子：

function new_menu_items($items) {
   if(!is_user_logged_in) {
      $items .=  "<li class='menu-item'><a href='" . get_site_url() . "/login/' data-level='1'><span class='menu-item-text'><span class='menu-text'>" . __("Inloggen", "sz") . "</span></span></a></li>";
   }
}

【讨论】：