• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Problems with hamburger menu on site using Authority Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Problems with hamburger menu on site using Authority Pro

This topic is: not resolved

Tagged: hamburger menu, responsive menu, sub menu

  • This topic has 3 replies, 2 voices, and was last updated 4 years, 10 months ago by Brad Dalton.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 1, 2018 at 1:50 pm #218533
    FrankJohnson
    Member

    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:

    Hamburger Menu Problem When Not Hovering

    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):

    Hamburger Menu Problem When Hovering

    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):

    Hamburger Menu Problem When Hovering

    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
    April 2, 2018 at 12:11 am #218542
    Brad Dalton
    Participant

    Hi Frank

    How about something like this :

    sub_menu_item_columns


    Get Help – Book Consultation.

    April 2, 2018 at 8:29 am #218551
    FrankJohnson
    Member

    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

    April 2, 2018 at 8:35 am #218552
    Brad Dalton
    Participant

    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.


    Get Help – Book Consultation.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble