Forum Replies Created
-
AuthorPosts
-
studio_chileMember
Solved it by removing the padding adding some margin to the before element.
April 21, 2015 at 10:59 am in reply to: Toggle show & hide second and third tier navigation links in mobile navigation #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";
}}
March 5, 2015 at 2:29 pm in reply to: Buy the framework first, then buy the Pro Plus All-Theme Package later #143371studio_chileMemberThanks! I will ask the sales guys.
-
AuthorPosts