Genesis is the most stylish WordPress theme framework I know. Version 1.8.0 of this versatile theme has been released. Lifted straight from the horses mouth, it comes with a few changes:
Genesis version 1.8.0 continues in the long tradition of being extremely flexible AND developer friendly. This latest version comes with a fresh new front-end style, a couple of new settings, and some new hotness for developers who work with Genesis, including extensive inline documentation. – genesistheme.com
With the release of Genesis 1.8.0 begins the removal of two Genesis theme widgets:
- Genesis Page Menu, and
- Genesis Category Menu.
They have been deprecated ready for final removal in Genesis 2.0.0. The Genesis developers believe neither widget is required now that WordPress has custom menus.
In the main, I agree with that notion. Custom menus let us build navigation menus out of links, pages and categories so there’s no need for an extra widget to do the same. But what happens when we put a custom menu in a widget not intended for a custom menu to be put into it?
Answer: it displays as a vertical list!
That’s not a problem when your menu is in a sidebar but it is a definite headache when your custom menu is in your header or footer or anywhere else where it should display as a horizontal bar.
The Fix
The fix requires a little bit of CSS. This CSS will change a list menu into a horizontal bar menu. It works for the Genesis theme framework and its child themes. It might work in other themes but some CSS changes will be required.
Add the following snippet into the Header and Footer Scripts section of Genesis > Theme Settings. Put it in the text box below the line Enter scripts or code you would like output to wp_head():.
This snippet will make a custom category menu into a horizontal menu when displayed in a widget.
<style>
/* CUSTOM MENU CSS */
.menu-custom-container {
background-color: #111;
clear: both;
color: #fff;
font-family: 'Lato', sans-serif;
overflow: hidden;
width: 100%;
}
.menu-custom-container .menu {
float: right; /* options are left, right and none */
width: auto;
}
.menu-custom-container {
margin: 10px 0 0;
}
.menu-custom-container ul {
float: left;
width: 100%;
}
.menu-custom-container li {
float: left; /* options are left, right and none */
list-style-type: none;
}
.menu-custom-container a {
color: #fff;
display: block;
padding: 15px 20px;
position: relative;
text-decoration: none;
}
.menu-custom-container li a:hover,
.menu-custom-container li:hover a,
.menu-custom-container .current-menu-item a {
color: #3fb6d7;
}
.menu-custom-container li li a,
.menu-custom-container li li a:link,
.menu-custom-container li li a:visited {
background-color: #111;
border: 1px solid #333;
border-top: none;
color: #fff;
font-size: 12px;
padding: 15px 20px;
position: relative;
text-transform: none;
width: 103px;
}
.menu-custom-container li li a:hover {
color: #3fb6d7;
}
.menu-custom-container li ul {
height: auto;
left: -9999px;
position: absolute;
width: 145px;
z-index: 9999;
}
.menu-custom-container li ul a {
width: 135px;
}
.menu-custom-container li ul ul {
margin: -49px 0 0 144px;
}
</style>Know the name of your custom menu. Change the words in your menu’s name to all lowercase letters and replace any spaces with a hyphen. Look at the above CSS. See where it says .menu-custom-container? Replace custom with the name of your menu name in lowercase letters and spaces replaced with hyphens.
Your Genesis child theme will use different colors and you might want the menu to be less tall. Edit the CSS to match your particular theme styles.
What’s Next?
Please leave comments, tips and questions below.
wpDiscuz