Community Forums › Forums › Archived Forums › General Discussion › Toggle show & hide second and third tier navigation links in mobile navigation
- This topic has 1 reply, 1 voice, and was last updated 8 years, 11 months ago by studio_chile.
-
AuthorPosts
-
April 20, 2015 at 6:53 pm #148619studio_chileMember
Hi there,
When the main navigation becomes mobile responsive,
by default I would like the navigation to hide all the second-tier and third-tier navigation links,
and show them if a down-pointing triangle positioned next to their parent links are clicked.
And when a up-pointing triangle is clicked, hide its children links.By default primary navigation links can show and hide their children links by clicking on triangle icons. I would like to apply this method to second-tier and third-tier navigation links.
Does anyone know how to do this?
Thanks!April 21, 2015 at 10:59 am #148693studio_chileMemberOK got this issue sorted. Not 100% perfect but this solution works.
The navigation's sub menu items toggle show & hide just like the main menu items.The code is not clean or neat. If you can tidy it up please post your response here.
Replace the original code in the *theme*\js\responsive-menu.js with this:
jQuery(function( $ ){
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .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").slideToggle();
});$(window).resize(function(){
if(window.innerWidth > 600) {
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item, .responsive-menu > .menu-item > .sub-menu > .menu-item").removeClass("menu-open");
}
});$(".responsive-menu > .menu-item, .responsive-menu > .menu-item > .sub-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});});
And then add this to the bottom of *theme*\style.css
@media only screen and (max-width: 600px) {.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu > .menu-item .sub-menu {
display: none;
}.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}.genesis-nav-menu.responsive-menu > .menu-item-has-children > .sub-menu .menu-item-has-children > a {
margin-right: 60px;
background: none;
color: #fff;
line-height: 1;
padding: 18px 20px;
position: static !important; /* This fixes the sub menu's anchor tag not having margin-right 60px */
}.genesis-nav-menu.responsive-menu > .menu-item-has-children > .sub-menu .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 16px 20px;
right: 0;
text-align: right;
z-index: 9999;
}.genesis-nav-menu.responsive-menu > .menu-item-has-children > .sub-menu > .menu-open.menu-item-has-children:before {
content: "\f343";
}}
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.