Magazine Pro Responsive Menu Missing

[slybug]

My site is http://panamacitybeachonline.com

I have tried everything to get the "hambuger" or stack to show in responsive view the menu just disappears entirely.

I have tried editing the css:
To match the demo:

.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon{
display: none changed to anything else and the whole menu appears not the stack

http://panamacitybeachonline.com

[slybug]

oh I also just recently reinstalled the style.css with the orginal one and still nothing

[Tonya]

Hi there,

The style.css is much different than the latest Magazine Pro. Not sure why if you reinstalled the original one.

Regardless you have the following issues occurring:
1) Your responsive-menu.js file is adding an ID and not a class. Therefore, the styling needs to target #responsive-menu-icon instead of .responsive-menu-icon.

2) On line 1491 of your style.css, you need to add display: none; to hide the responsive-menu-icon until you hit the mobile breakpoint.

3) Then on line 2118-2200, you can replace these lines with this:

	.genesis-nav-menu > .first > a {
		padding-left: 20px;
	}

	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}

	.genesis-nav-menu.responsive-menu .menu-item,
	#responsive-menu-icon {
		display: block;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item {
		margin: 0;
	}

	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}
	
	.genesis-nav-menu a {
		line-height: 1;
		padding: 18px 20px;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;	
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}

	.genesis-nav-menu.responsive-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-open.menu-item-has-children:before {
		content: "\f343";
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		color: #fff;
	}

	.genesis-nav-menu.responsive-menu .sub-menu {
		background-color: rgba(0, 0, 0, 0.05);
		border: none;
		left: auto;
		opacity: 1;
		position: relative;
		-moz-transition:    opacity .4s ease-in-out;
		-ms-transition:     opacity .4s ease-in-out;
		-o-transition:      opacity .4s ease-in-out;
		-webkit-transition: opacity .4s ease-in-out;
		transition:         opacity .4s ease-in-out;
		width: 100%;
		z-index: 99;
	}

	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		background-color: transparent;
		margin: 0;
		padding-left: 25px;
	}

	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		background: none;
		border: none;
		padding: 14px 20px;
		position: relative;
		width: 100%;
	}

4) You need to enqueue dashicons too by putting this into the wp_enqueue_scripts callback in your functions.php file:
wp_enqueue_style( 'dashicons' );

5) Whenever you change a javascript or style.css file, you need to make sure you uptick the CHILD_THEME_VERSION number, say to 1.1 or whatever. Why? WordPress appends this version number to the end of these resource scripts to ensure whomever has already visited your website in the past gets the latest version(s). Here is an article I wrote about to help you out.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[slybug]

Sorry I meant to say that I downloaded the latest CSS and copied over mine. To try and fix this issue it so it is the latest CSS

[slybug]

OK I have done everything and still no menu...
GRR
I again downloaded the latest css in copied over mine (then copied back the custom style which was very little) Every thing that was missing I now confirmed it to be there and still nothing

[Tonya]

Make sure you implement the changes step-by-step that I indicated above, as there is still no styling in place for #responsive-menu-icon. Remember the js is adding it as an ID and not a class.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[slybug]

This is the copy of the .js file:
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 > 768) {
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .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");
});
});

});

it is not referring to the #responsive-menu but the .responsive-menu... I included both in the css the # version and the . version and still nothing

[Tonya]

Hi again,

Here is what I'm seeing on your live site in Chrome and Firefox for your responsive-menu.js file:

jQuery(function( $ ){

	$(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>');

	

	$("#responsive-menu-icon").click(function(){

		$(".nav-primary .genesis-nav-menu").slideToggle();

	});

	

	$(window).resize(function(){

		if(window.innerWidth > 768) {

			$(".nav-primary .genesis-nav-menu").removeAttr("style");

		}

	});

	

});

Are you working on the live site? Or elsewhere?

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[slybug]

OH I have also tried disabling all the plugins and it still disappears

[slybug]

I know it is bad to do this live but even a missing menu is better than what it was when I started

[Tonya]

It's actually showing the file in your theme under js/responsive-menu.js on the live site, per Chrome Dev Tools.

I'm asking if you are changing things on your live site, as you are showing me code that is not on the live site per what I am seeing. This is why I questioned where you are making changes.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[slybug]

In any case I added it this way:
.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon,
#responsive-menu-icon {
display: block;
}

I also tried it by just adding the # version by itself and still nothing

[Tonya]

OK, let's stop and take a deep breath together. We need to get on the same page for me to help you.

Please answer these questions for me:

1) Are you working on your live site's theme?

2) How are you making changes to the theme? Using the built-in editor or working offline and then transferring the file?

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[slybug]

I am click on appearance then editing style css (like normally)

[Tonya]

Go to line 1486 (or search for .responsive-menu-icon) in the style.css. You need to change each of the .responsive-menu-icon to #responsive-menu-icon like so:

/* Responsive Menu
--------------------------------------------- */

#responsive-menu-icon {
	cursor: pointer;
	display: none;
	margin-bottom: -1px;
	text-align: center;
}

#responsive-menu-icon::before {
	content: "\f333";
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
}

.site-header #responsive-menu-icon::before {
	padding: 0;
}

2) Then on line 2126, remove the #responsive-menu-icon from this line so that now this styling looks like this:

.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}

3) Then in the next group, change .responsive-menu-icon to #responsive-menu-icon so that it looks like this:

	.genesis-nav-menu.responsive-menu .menu-item,
	#responsive-menu-icon {
		display: block;
	}

Let me know what happens. Make sure you uptick CHILD_THEME_VERSION so that I get the latest revisions.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[slybug]

All most there the only issue is that the menu is expanded on load

[Tonya]

Around line 2121 in the style.css add the following:

	.responsive-menu {
		display: none;
	}	

I know that the editor doesn't have line numbers, so just search for #responsive-menu-icon. It is in the breakpoint for

@media only screen and (max-width: 768px)

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[slybug]

Thank you thank you thank you thank you..

[Tonya]

You are very welcome.

Enjoy your day!
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

BTW If you don't mind, please mark this one as "Resolved". 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts