Problems with hamburger menu on site using Authority Pro

[FrankJohnson]

Friends:

I'm working on this site which uses the Authority Pro theme.

I felt the number of items on the Content sub-menu made it too long so I found a tutorial on the web that allowed me to create a 2-column sub-menu, using a class called sub-menu-columns. I also applied the same concept to the Work Samples sub-menu, using a class called sub-menu-columns2.

But I noticed that the 2-column menus were causing problems on the hamburger menu when the site was viewed on a tablet or phone. I tweaked the CSS a bit and seemed to have solved that problem. But two new problems have arisen:

1. The menu-toggle button associated with the Content menu item is appearing geographically too high on the screen; and,

2. The menu-toggle button associated with the Work Samples menu item does not appear at all.

Here's a screenshot of the hamburger menu when I'm not hovering over the menu-toggle button associated with the Content menu item:

If I hover over the menu-toggle button associated with the Content menu item, the non-highlighted button (which is too high on the screen) flickers and the highlighted menu-toggle button appears in the correct place (but leaves the non-hover state visible too high on the screen):

Sometimes when I hover over the menu-toggle button associated with the Content menu item, the menu-toggle button associated with the Work Samples menu item appears in a highlighted state (with a great deal of flickering):

Here is the CSS which I believe governs the hamburger menu (I've prefaced the selectors I added with "***"):

/* Genesis Responsive Menus */
	.genesis-responsive-menu .wrap {
		padding: 0;
	}

	.genesis-responsive-menu {
		display: none;
		position: relative;
	}

	.genesis-skip-link .skip-link-hidden {
		display: none;
		visibility: hidden;
	}

	.genesis-responsive-menu .highlight a,
	.genesis-responsive-menu .highlight a:focus,
	.genesis-responsive-menu .highlight a:hover {
		background: transparent;
		box-shadow: none;
		color: #111;
		transform: none;
	}

	.genesis-responsive-menu .highlight a:focus,
	.genesis-responsive-menu .highlight a:hover {
		color: #000cff;
	}

	.menu-toggle,
	.sub-menu-toggle {
		border: 2px solid #000cff;
		background-color: #fff;
		color: #000cff;
		display: block;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		visibility: visible;
	}

	.menu-toggle:focus,
	.menu-toggle:hover,
	.sub-menu-toggle:focus,
	.sub-menu-toggle:hover {
		background: #000cff;
		color: #fff;
	}

	.menu-toggle {
		line-height: 20px;
		position: relative;
		z-index: 1000;
		width: 100%;
	}

	.menu-toggle::before {
		font-size: 1.5em;
		margin-right: 10px;
		text-rendering: auto;
		vertical-align: top;
	}

	.sub-menu-toggle {
		float: right;
		padding: 15px 10px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 100;
	}

	.sub-menu-toggle::before {
		display: inline-block;
		text-rendering: auto;
		-webkit-transform: rotate( 0 );
		-ms-transform:     rotate( 0 );
		transform:         rotate( 0 );
		-webkit-transition: transform 0.25s ease-in-out;
		-ms-transition:     transform 0.25s ease-in-out;
		transition:         transform 0.25s ease-in-out;
	}

	.sub-menu-toggle.activated::before {
		-webkit-transform: rotate( 180deg );
		-ms-transform:     rotate( 180deg );
		transform:         rotate( 180deg );
	}

	.genesis-responsive-menu .genesis-nav-menu .menu-item {
		display: block;
		float: none;
		position: relative;
		text-align: left;
	}

	.genesis-responsive-menu .genesis-nav-menu .menu-item:focus,
	.genesis-responsive-menu .genesis-nav-menu .menu-item:hover {
		position: relative;
	}

	.genesis-responsive-menu .genesis-nav-menu a:focus,
	.genesis-responsive-menu .genesis-nav-menu a:hover {
		color: #000cff;
	}

	.genesis-responsive-menu .genesis-nav-menu .menu-item a {
		border: none;
		margin-bottom: 1px;
		padding: 15px 20px;
		text-align: left;
		width: 100%;
	}

	.genesis-responsive-menu .genesis-nav-menu .sub-menu {
		border: none;
	}

	.genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
	.genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu,
	.genesis-nav-menu .highlight {
		left: 0;
		margin-left: 0;
	}

	.genesis-responsive-menu .genesis-nav-menu > .menu-item-has-children > a::after {
		content: none;
	}

	.genesis-responsive-menu .genesis-nav-menu .sub-menu {
		box-shadow: none;
		clear: both;
		display: none;
		margin: 0;
		opacity: 1;
		padding-left: 15px;
		position: static;
		width: 100%;
	}

	.genesis-responsive-menu .genesis-nav-menu .sub-menu .sub-menu {
		margin: 0;
	}
	
	***ul.genesis-nav-menu li {
		width: 100% !important;
	}
	
	.genesis-responsive-menu .genesis-nav-menu .sub-menu-columns {
		border: none;
	}

	***.genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu-columns,
	***.genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu-columns .sub-menu,
	.genesis-nav-menu .highlight {
		left: 0;
		margin-left: 0;
	}

	***.genesis-responsive-menu .genesis-nav-menu .sub-menu-columns {
		box-shadow: none;
		clear: both;
		margin: 0;
		opacity: 1;
		padding-left: 15px;
		position: static;
		width: 100%;
		visibility: visible;
	}

	***.genesis-responsive-menu .genesis-nav-menu .sub-menu-columns .sub-menu {
		margin: 0;
	}
	
	***li.sub-menu-columns {
		padding-left:0px !important;
	}
	
	***.genesis-responsive-menu .genesis-nav-menu .sub-menu-columns2 {
		border: none;
	}

	***.genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu-columns2,
	***.genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu-columns2 .sub-menu,
	.genesis-nav-menu .highlight {
		left: 0;
		margin-left: 0;
	}

	***.genesis-responsive-menu .genesis-nav-menu .sub-menu-columns2 {
		box-shadow: none;
		clear: both;
		margin: 0;
		opacity: 1;
		padding-left: 15px;
		position: static;
		width: 100%;
		visibility: visible;
	}

	***.genesis-responsive-menu .genesis-nav-menu .sub-menu-columns2 .sub-menu {
		margin: 0;
	}
	
	***li.sub-menu-columns2 {
		padding-left:0px !important;
	}

I'm not an expert in CSS and I feel like I just must be missing something, but when I look at the styles, I don't see anything obvious that would cause the problem I'm experiencing.

Any help anyone could offer would be greatly appreciated!

Thanks,
Frank

http://www.franknjohnson.net

[Brad Dalton]

Hi Frank

How about something like this :

---

Tutorials for StudioPress Themes & WooCommerce.

[FrankJohnson]

Hey Brad - thanks for responding. The menus were working like that on my iPad before I made any tweaks, except that the LinkedIn, Twitter, and Facebook items were floating to the right in a third column and when I tried to press one of the Content sub-menu items, pressing would activate the LinkedIn, Twitter, and Facebook items instead of the sub-menu items.

So I decided to try and get the sub-menu items to just appear in a single column. But if the sub-menu items could appear in a columnar presentation with the rest of the main menu items (including the three social links) staying out of the columns, that would be great.

Frank

[Brad Dalton]

This solution enables you to display or reposition sub menu items at any screen width.

Not sure if thats what you need but the CSS is fairly simple and easy to work with. It's only 1 or 2 CSS rules.

---

Tutorials for StudioPress Themes & WooCommerce.

[Author]

Posts