Title: Same Navigation Different Styles
Last modified: August 21, 2016

---

# Same Navigation Different Styles

 *  [Christine357](https://wordpress.org/support/users/christine357/)
 * (@christine357)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/same-navigation-different-styles/)
 * So I was wondering how I could paste another navigation menu in but have it a
   different style as my original. For example, the code of my current one is:
 *     ```
       <nav id="site-navigation" class="main-navigation" role="navigation">
       			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
       			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
       			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
       		</nav><!-- #site-navigation -->
       ```
   
 * To change the style of it I’ve edited the CSS of the “site-navigation” ID and
   the “main-navigation” class.
 * However now I’d like to also place a menu at the bottom of my page but I don’t
   want it to have the same styles. The problem is, if I change the ID or CLASS 
   of the navigation, the menu for mobile no longer works.
 * I just need to know how to have the same menu styled two different ways and stay
   linked to the “menu” functionality.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/same-navigation-different-styles/#post-4567624)
 * I believe the reason changing the nav menu class breaks for mobile users is your
   theme’s `@media screen` rules are no longer applied. You probably developed the
   alternate styles by copying what your theme did and modifying it. You need to
   do the same with the `@media screen` portions.
 *  Thread Starter [Christine357](https://wordpress.org/support/users/christine357/)
 * (@christine357)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/same-navigation-different-styles/#post-4567690)
 * Well that’s why the primary thing I’d change is the ID of the navigation. In 
   the parent theme stylesheet there is no styles assigned to #site-navigation which
   is the ID of my navigation bar.
 * At any rate, what is broken is the button functionality. The button will either
   still appear and nothing will happen when you click it or the button will appear
   and the nav links will be sitting outside it with no connection to the button(
   the button still does nothing)
 * In this case, I copied over all the [@media](https://wordpress.org/support/users/media/)
   screen portions that had to do with .main-navigation and changed the class (both
   in the navigation bar and in the styles) and still same issue: it breaks in mobile
   version by the links sit outside the non-functioning button.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Same Navigation Different Styles’ is closed to new replies.

 * 2 replies
 * 2 participants
 * Last reply from: [Christine357](https://wordpress.org/support/users/christine357/)
 * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/same-navigation-different-styles/#post-4567690)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics