Sub Menu @ Media Only and (max-width 767px)

Is it possible to get a Temporary Login to your site? I’m really curious where this extra Arrow and Code is coming from that is causing the Extra Space. I can definitely get it fixed once I take a look at the backend. There seems to be something going on causing this, and I would like to make sure and remove whatever it could be.

I just realized the version that you have is actually the updated version. The demo is still using an older version of the theme. The navigation in the new version functions with the nav going downward instead of horizontal.

The older version/demo is using a completely different setup in the menu. The responsive menu file in the js folder looks like this –

jQuery(function( $ ){

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

	$("#responsive-menu-icon").click(function(){
		$("header .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 768) {
			$("header .genesis-nav-menu").removeAttr("style");
		}
	});

});

While the new version looks like this –

jQuery(function( $ ){

	$("header .genesis-nav-menu, .nav-primary .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").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 768) {
			$("header .genesis-nav-menu, .nav-primary .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");
		});
	});

});

The css in the older version used ID’s – #responsive-menu-icon

Thew new version’s CSS uses Classes – .responsive-menu-icon

That’s why it’s not functioning like the demo.

It’s much easier to leave the arrows on the menu items so when your visitors are on your page, they know to click the link for more links in the sub menu. The “hovering” that you see on the demo can only be done with a mouse and is not possible on a mobile or tablet device. When someone is viewing your site on their phone/tablet, they still have to tap the link whether there is an arrow or not.

If you remove the arrow then your visitors may not know to click for more links. However, if you still prefer to remove that arrow, you can hide it by doing this –

Look around line 3138 in your css and you can either remove or comment this code out –

	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		content: "\f347";*/
		float: right;
		font: normal 20px/1 'dashicons';
		height: 20px;
		padding: 15px 20px;
		right: 0;
		text-align: right;
		z-index: 9999;
	}

Then do the same around line 3134 and remove or comment this code out as well –

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