Menu toggle query

  • SmokescreenCrea

    (@smokescreencrea)


    9 years, 8 months ago

    Hi,

    I’m using menu toggle in my theme to show a collapsed nav menu on smaller screens.

    On the larger screen site I have two menus, call them menu A and menu B.

    When I collapse the screen I hide menus A and B and the menu toggle button shows. However at the moment the menu displayed by the menu toggle is just menu A, is there a way to have both menu A AND menu B display under just the one menu toggle button?

    I have managed to get it so that menu A display and then menu A and menu B but that is duplicating menu A and I only want menu A once followed straight away by menu B. So how can I remove the first menu A from the menu toggle output??

    The code I’m working with is as follows (where theme location primary = menu A and theme location tab-nav-links = menu B and theme location small-screen-nav-menu = a third menu I created to hold contents of both menus A and B.) 

    <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    	<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
    	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        <h3 class="menu-toggle"><?php wp_nav_menu( array( 'theme_location' => 'small-screen-nav-menu', 'menu_class' => 'nav-menu' ) ); _e('Menu'); ?> </h3>
    </nav>

</header>

<section id="tab_links">
<?php wp_nav_menu( array( 'theme_location' => 'tab-nav-links' ) ); ?>
</section><!--end of tab links-->
Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 8 months ago

    Where did you get this JS from?

    Thread Starter SmokescreenCrea

    (@smokescreencrea)

    9 years, 8 months ago

    Do you mean Javascript? If so I wasn’t aware there was any Javascript in the that particular code but either way I took the original code twentythirteen template code:

    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>

    and modified it in a child theme / new theme. I then went into functions.php and registered new nav menus and locations and then setup the contents of those nav menus in the wordpress dashboard.

    I also looked at functions.js to see whether anything in there was determining how the menu toggle displayed but I couldn’t see anything.

    Thanks for any help you can provide

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 8 months ago

    Cool, so to replicate (if you can’t link the site) the problem we need to have the HTML output of this:

    <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    	<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
    	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        <h3 class="menu-toggle"><?php wp_nav_menu( array( 'theme_location' => 'small-screen-nav-menu', 'menu_class' => 'nav-menu' ) ); _e('Menu'); ?> </h3>
    </nav>

</header>

<section id="tab_links">
<?php wp_nav_menu( array( 'theme_location' => 'tab-nav-links' ) ); ?>
</section><!--end of tab links-->

    Thread Starter SmokescreenCrea

    (@smokescreencrea)

    9 years, 8 months ago

    Oh I can link to the site yes – my bad.

    The site is here:

    Interior page of live site

    Just to clarify though the live site has slightly different code from what I posted above as the above is my development code and the live site is just using what I believe is the standard twentythirteen code which I think is this:

    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>

    So you can see the output on the live site and I’ll explain that below but I have also made a screen grab of the output of the posted development code and that can be found here:

    Link to what happens using development code

    What I want to happen is just to display the menu C / Smaller screen menu from the above image without the menu A / primary menu showing up as well.

    If anything is unclear please let me know and I’ll try to clarify – thanks again!

    Explanation of what’s happening on the live site is:
    There is a menu that runs along the top of the screen in a green bar with white writing, this is the primary menu or menu A in my example and then there are some other links below this menu that are in white boxes with green borders. The links here are part of the tab-nav-links menu or menu B in my example.

    Then when the screen is collapsed for smaller devices you’ll see that at certain screen sizes the primary menu disappears and the menu toggle is displayed whilst the tab-nav-links are still present but then if you shrink the screen more the tab-nav-links menu disappears and there is just the menu toggle button.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Menu toggle query’ is closed to new replies.