Same Navigation Different Styles

  • Christine357

    (@christine357)


    12 years, 3 months ago

    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

    (@bcworkz)

    12 years, 3 months ago

    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

    (@christine357)

    12 years, 3 months ago

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