不同的导航栏在不同的页面

我有一个导航栏，可以通过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 CODE`

<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。

来源

2017-05-03 Dipankar Das

根据您所在的页面为'html'或'body'元素提供一个类;然后在你的CSS选择器中使用它。 – CBroe

你打算使用jQuery吗？ –

这首先不应该是一个CSS问题。相反，在你的头文件模板中，你应该检查你所在的页面（WordPress的功能如is_home等），然后输出适当的菜单，并且只有那个。 – CBroe

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

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>"; 
    } 
}

来源

2017-05-03 09:30:23 berend

不同的导航栏在不同的页面

回答

相关问题