CSS editing two nav bars (Adelle theme)

2 Views

I added second nav menu (nav2), however it adopts the look of first (nav1) menu and I cannot fix it. On the other hand its content is different.

piece of header.php:

Read More
 <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;}
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. If you want 2 navs, one looking different that the other, I’d suggest you use the nav tag for both, but add a unique ID for the second nav and use that ID in your css to overwrite the styles you need to change for the second nav:

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

    You don’t necessarily need the class on the main nav. You can style as such:

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

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