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.
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
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.
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.
Leave a Reply