Add Buttons to Genesis Responsive Menu Icon and Indicators

The responsive menus in Genesis themes were updated (summer 2014) and are now easier to use on mobile devices, especially if there are a large number of menu items in the drop downs.

The look of the Genesis responsive menu is nice and clean, but some people are not sure where to click when they first see this menu. To make where to click a little more obvious, the responsive menu icon and the drop down arrow indicators can be made to look more like buttons with just a little bit of CSS.

genesis responsive menu with buttons

The theme used for this tutorial is Enterprise Pro, but similar CSS can be used for many of the current pro themes.

Responsive Menu Icon

genesis responsive menu icon

This is how it will look.

First find the section, Responsive Menu.
In that section is responsive-men-icon::before:

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

You can edit the CSS to:

.responsive-menu-icon::before {
	background-color: #444;
	border-radius: 2px;
	content: "\f333";
	display: inline-block;
	font: normal 30px/1 'dashicons';
	margin: 6px auto;
	padding: 6px 20px;
}

These are the changes that you can make:

  • add a background-color that is different from the menu, background-color: #444;
  • add some border radius (optional), padding: 6px 20px;
  • add some top and bottom margin, margin: 6px auto;
  • reduce the top and bottom padding a bit (optional), padding: 6px 20px;
  • and you can also make the icon a bit larger (optional), font: normal 30px/1 'dashicons';

Genesis Responsive Menu (@media section)

This is the original Genesis responsive menu when one menu item is expanded.

genesis responsive menu expanded

Next you want to find the section that adds the CSS for the mobile responsive menu. For Enterprise Pro, it’s
@media only screen and (max-width: 768px) {

In that section, find

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

Make these edits:

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
	background-color: #444;
	border-radius: 2px;
	content: "\f347";
	float: right;
	font: normal 16px/1 'dashicons';
	height: 16px;
	margin: 6px 0;
	padding: 10px 20px;
	right: 0;
	text-align: right;
	z-index: 9999;
}

The changes that you can make are similar to those you made for the responsive menu icon:

  • add a background-color that is different from the menu, background-color: #444;
  • add some border radius (optional), border-radius: 2px;
  • add some top and bottom margin, margin: 6px 0;
  • reduce the top and bottom padding a bit, padding: 10px 20px;

If you would like to add lines to separate the menu items, you can find this section:

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

and add a border, and optionally add a bit of padding to the menu items.

.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
	border-bottom: 1px solid #222;
	display: block;
	padding: 0 20px;
}

If you used the tutorial to add arrow indicators for the desktop menu, then you will also need to add this section:

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

If you like, you can edit the padding, so it’s the same for all menu items. So find this section:

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

And edit the padding, so that the section is:

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

You may want to make some other style changes, but this tutorial provides the basics to get you started adding buttons to your responsive menu icons and indicator arrows.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

12 responses to “Add Buttons to Genesis Responsive Menu Icon and Indicators”

  1. Petri says:

    Thank you Marcy, this was exactly what I was looking for.
    I admire your Genesis tutorials!

  2. Bill Norris says:

    I made the changes to the .responsive-menu-icon::before as outlined above, but the dashicons does not center, it shows up all the way to the left.

    • Marcy Diaz says:

      It looks to me like you are using an older version of the Enterprise theme. It is not responsive, so it doesn’t have .responsive-menu-icon. This tutorial only applies to the very latest Genesis nav menus, those that were updated summer 2014.

  3. Petri says:

    Hi Marcy,

    A happy new year to you!

    I’ve added your menu to one of my sites, it works great. Now I’m trying to do so for another site as well, however I’m encountering the same problem as Bill : the resp. menu icon is aligned left.

    The theme is quite new ‘Daily dish Pro’, I’m using the secondary navigation menu. Maybe you can have a look at the site to see it ‘in action’.

    Thanks!

    • Marcy Diaz says:

      Hi, Petri,

      I think that you are just missing some code.
      When I look at your CSS, I see that you commented out this in the “@media only screen and (max-width: 768px) {” section:

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

      You need to have all of this though, and I don’t see it:

      .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
      	background-color: #444;
      	border-radius: 2px;
      	content: "\f347";
      	float: right;
      	font: normal 16px/1 'dashicons';
      	height: 16px;
      	margin: 6px 0;
      	padding: 10px 20px;
      	right: 0;
      	text-align: right;
      	z-index: 9999;
      }

      If that doesn’t work, maybe you can follow the tutorial again. All the best with it!

  4. Petri says:

    You were right, I pasted something wrong, however the problem stays after trying again.
    The hamburger is still at the left. (I cleared the cache).
    Thanks anyhow.

  5. Petri says:

    That suggestion did the trick with me also. Thanks a lot Marcy!

Leave a Reply

Your email address will not be published. Required fields are marked *