StudioPress Genesis!
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?
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 only. Other themes and theme frameworks will require a different CSS.
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>
ul#menu-categories {
width: auto;
float: right;
list-style: none;
list-style-type: none;
list-style-image: none;
color: #FFFFFF;
text-transform: uppercase;
margin: 0;
padding: 0;
}
ul#menu-categories li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
ul#menu-categories li a {
background: #333333;
color: #FFFFFF;
display: block;
font-size: 12px;
margin: 0;
padding: 6px 10px 5px 10px;
text-decoration: none;
border-right: 1px solid #666666;
position: relative;
}
ul#menu-categories li a:hover, ul#menu-categories li a:active, ul#menu-categories .current_page_item a {
background: #000000;
color: #FFFFFF;
}
ul#menu-categories li a.sf-with-ul {
padding-right: 20px;
}
ul#menu-categories li a .sf-sub-indicator {
background: transparent url(images/no-repeat.png) no-repeat 0 -66px;
display: block;
width: 10px;
height: 8px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 11px;
right: 5px;
}
ul#menu-categories li li a, ul#menu-categories li li a:link, ul#menu-categories li li a:visited {
background: #333333;
color: #FFFFFF;
width: 158px;
font-size: 11px;
margin: 0;
padding: 6px 10px 6px 10px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
position: relative;
}
ul#menu-categories li li a:hover, ul#menu-categories li li a:active {
background: #000000;
}
ul#menu-categories li li a .sf-sub-indicator {
background: transparent url(images/no-repeat.png) no-repeat 0 -74px;
height: 10px;
width: 10px;
top: 10px;
}
ul#menu-categories li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0;
padding: 0;
}
ul#menu-categories li ul a {
width: 160px;
}
ul#menu-categories li ul ul {
margin: -33px 0 0 179px;
}
ul#menu-categories li:hover ul ul, ul#menu-categories li:hover ul ul ul, ul#menu-categories li.sfHover ul ul, ul#menu-categories li.sfHover ul ul ul {
left: -999em;
}
ul#menu-categories li:hover ul, ul#menu-categories li li:hover ul, ul#menu-categories li li li:hover ul, ul#menu-categories li.sfHover ul, ul#menu-categories li li.sfHover ul, ul#menu-categories li li li.sfHover ul {
left: auto;
}
ul#menu-categories li:hover, ul#menu-categories li.sfHover {
position: static;
}
ul#menu-categories.menu li
{
margin:0;
border:0;
padding:0;
list-style: none;
list-style-type: none;
list-style-image: none;
background: none;
background-image: none;
}
</style>
Your specific child theme will use different colors and images so edit the above snippet to match your particular theme.
To make a custom page menu display as a horizontal bar within a widget, change every instance of
menu-categories
to
menu-pages.
If you don't already use StudioPress Genesis then I highly recommend you take a look at it. This site, JournalXtra, uses Genesis and several of my other sites use Genesis too. I have a developer licence for the theme so if you find one you like, tell me and I'll let you pay me to install it for you.
Want to republish this content? Read the copyright notice first.. If you like it, support it.
Related posts:
