不同的導航欄在不同的頁面

我有一個導航欄，可以通過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

不同的導航欄在不同的頁面

回答

相關問題