Community Forums › Forums › Archived Forums › General Discussion › How to make tertiary menu mobile responsive?
Tagged: mobile responsive, responsive menu, tertiary menu
- This topic has 7 replies, 2 voices, and was last updated 9 years, 2 months ago by Marcy.
-
AuthorPosts
-
December 17, 2014 at 12:01 am #134731VanessaMember
How can I make a tertiary menu I've created mobile responsive like the included primary and secondary menus?
Here is the code I placed in my functions.php file to create the third menu.
function register_additional_menu() { register_nav_menu( 'third-menu' ,__( 'Third Navigation Menu' )); } add_action( 'init', 'register_additional_menu' ); add_action( 'genesis_after_header', 'add_third_nav_genesis' ); function add_third_nav_genesis() { echo'<div class="nav-tertiary">'; wp_nav_menu( array( 'theme_location' => 'third-menu', 'container_class' => 'genesis-nav-menu' ) ); echo'</div>'; }
January 10, 2015 at 11:05 pm #136976MarcyParticipantYou will need to post your .js file that adds the responsive menu icon before the menus, so someone can see how the responsive menu icon is being added for the other menus for your theme.
In the .js file, you will probably need to add the class .nav-tertiary .genesis-nav-menu to the places that have .nav-primary .genesis-nav-menu and .nav-secondary .genesis-nav-menu
Not sure which mobile menu version you are using, so can't be more specific.
Marcy | Amethyst Website Design | Twitter
January 21, 2015 at 8:26 am #138180VanessaMemberThanks for commenting, @Marcy!
Here is the .js file. I already added in .nav-tertiary .genesis-nav-menu which is how I got the top level to collapse, but the sub-menus still aren't.
jQuery(function( $ ){ $("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-tertiary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>'); $(".responsive-menu-icon").click(function(){ $(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-tertiary .genesis-nav-menu").slideToggle(); }); $(window).resize(function(){ if(window.innerWidth > 767) { $("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-tertiary .genesis-nav-menu, nav .sub-menu").removeAttr("style"); $(".responsive-menu > .menu-item").removeClass("menu-open"); } }); $(".responsive-menu > .menu-item").click(function(event){ if (event.target !== this) return; $(this).find(".sub-menu:first").slideToggle(function() { $(this).parent().toggleClass("menu-open"); }); }); });
January 21, 2015 at 1:03 pm #138203MarcyParticipantIt's difficult to say without a link to your website.
Look at your source code using Firebug or Chrome Developer Tools. Look at the .sub-menu code. Is it still showing a display: block at smaller screen sizes?
This is what hides the sub-menu for me in the @media query section:
.genesis-nav-menu.responsive-menu, .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu { display: none; }
Also in the CSS in the top section for desktop, do you specifically refer to .nav-tertiary .genesis-nav-menu with the .sub-menu? If so, then you have to be that specific in the CSS in the @media queries.
Marcy | Amethyst Website Design | Twitter
January 26, 2015 at 10:58 pm #138732VanessaMemberThanks @Marcy! I'm still a bit unsure of what to do, but thank you for the guidance. I'm going to look at the CSS again now.
Here is a link to the site: http://babesindisneylandblog.com.
January 27, 2015 at 2:17 pm #138791MarcyParticipantNow that I can see the site, the added menu markup is not the same as the others, so that's why it's not working.
This is a better tutorial to use for the future: http://wpbeaches.com/add-footer-menu-genesis-child-theme/
But I think we can just edit your code in functions.php and get it where you need it.
function register_additional_menu() { register_nav_menu( 'third-menu' ,__( 'Third Navigation Menu' )); } add_action( 'init', 'register_additional_menu' ); add_action( 'genesis_after_header', 'add_third_nav_genesis' ); function add_third_nav_genesis() { echo'<nav class="nav-tertiary">'; wp_nav_menu( array( 'theme_location' => 'third-menu', 'menu_class' => 'menu genesis-nav-menu menu-tertiary' ) ); echo'</nav>'; }
Everything I changed was in this section: function add_third_nav_genesis() {
If you replace that whole function in your functions.php, it may just work.
If not, I can look at the markup and see where changes are needed.Re
Marcy | Amethyst Website Design | Twitter
January 27, 2015 at 10:37 pm #138811January 28, 2015 at 9:42 am #138843MarcyParticipant -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.