Mobile Sub Menu

Try adding this to your custom CSS –

.site-header .genesis-nav-menu.responsive-menu .sub-menu li a {
	background-color: #000;
	padding: 10px 20px;
	width: 190px;
}

I added the background color of the Sub Menu as black. You can switch it or remove it if you don’t want/need one by changing it to match the default background color.

Let me know if that helps.

Yeah we can adjust that. If you edit the Custom Code you have around line 3296 and increase the padding it should work –

	.genesis-nav-menu.responsive-menu li a, .genesis-nav-menu.responsive-menu li a:hover {
	    background: none;
	    border: none;
	    display: block;
	    padding: 20px 0;
	    text-transform: none;
	}

I changed it from 10px to 20px in this example. You can adjust more if you need.

While viewing this, I just noticed something I need to fix in the theme. While in Responsive mode, this code adds more space under each main menu item when scrolling down –

	.genesis-nav-menu a,
	.site-header.light .genesis-nav-menu a {
		padding: 10px 10px 20px;
	}

It’s located around 2600 in the Default Theme, but since you have a custom CSS it’s located on line 2604 in your file. You can comment out or remove that code if you need. I’ll be removing it from the Theme by default in the next update.

Let me know if that helps.

I’ll also be making the Sub menus look a little bit better in the next update as well.