php - CSS 编辑两个导航栏(Adelle 主题)

Question

我添加了第二个导航菜单 (nav2)，但它采用了第一个 (nav1) 菜单的外观，我无法修复它。另一方面，它的内容是不同的。

一段header.php:

 <nav class="nav" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' =>  'extra_menu&container_class=menu&fallback_cb=false&show_home=1' ) ); ?>
  </nav><!-- .nav -->

  <nav2 class="nav" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'top_menu', 'menu' => 'nav2')); ?>
    <form role="search" method="get" class="header-form" action="<?php echo esc_url( home_url() ); ?>">
      <fieldset>
        <input type="text" name="s" class="header-text uniform" size="15" title="<?php esc_attr_e( 'Search','adelle-theme' ); ?>" />
        <input type="submit" class="uniform" value="<?php esc_attr_e( 'Search','adelle-theme' ); ?>" />
      </fieldset>
    </form>
  </nav2><!-- .nav2 -->        

CSS:

      /* .nav */
      .mobile-nav {display: none;}
      .tinynav {display: none;}
      .nav {position: relative; top: 0px; width: 970px; display: inline-block; background: #000; padding: 0 25px; margin-top: 0px; clear: both; line-height: 1em; text-transform: uppercase;}

    .nav:before,
    .nav:after {border: 1.6em solid #000; content: ""; display: block;  position: absolute; bottom: 0; top: 0; z-index: 1;}
    .nav:before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
    .nav:after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}

  .nav ul {list-style: none; max-width: 780px; display: inline-block;}
  .nav a {display: block; padding: 14px; color: #fff;}
  .nav a:hover {text-decoration: underline; color: #fff;}
  .nav ul ul a {display: block; padding: 14px; position: relative;}


  /* .nav2 */
  .mobile-nav {display: none;}
  .tinynav {display: none;}
  .nav2 {position: fixed; top: 10px; width: 2000px; display: inline-block; background: #fff; padding: 0 25px; margin-top: 40px; clear: both; line-height: 1em; text-transform: uppercase;}

    .nav2:before,
    .nav2:after {border: 1.6em solid #000; content: ""; display: block; position: absolute; bottom: 0; top: 0; z-index: 1;}
    .nav2:before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
    .nav2:after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}

  .nav2 ul {list-style: none; max-width: 780px; display: inline-block;}
  .nav2 a {display: block; padding: 14px; color: #fff;}
  .nav2 a:hover {text-decoration: underline; color: #fff;}
  .nav2 ul ul a {display: block; padding: 14px; position: relative;}

Answer 1

如果你想要 2 个导航，一个看起来与另一个不同，我建议你对两者都使用 nav 标签，但为第二个导航添加一个唯一的 ID，并在你的 css 中使用该 ID 来覆盖你需要的样式更改第二个导航:

<nav>stuff here</nav>
<nav id="secondary-nav">stuff here</nav>

您不一定需要主导航上的类。您可以这样设置样式:

nav {
    position: relative; 
    top: 0px; 
    width: 970px;
}

nav#secondary-nav {
    top: 10px; 
    width: 2000px;
}