Genesis 1.8.0 Released. Menu Widgets Deprecated. You Need The Fix.

Genesis Theme Framework Screenshot
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. –

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.



.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;


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.

Sharing is caring!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

newest oldest most voted
Notify of

Hey – thanks for this, but it’s not working for me :( can I PM you for some commercial support?


Hey, thanks for the code! It worked with a little tweaking, but it sure would have been nice to have seen an example of the output. I have a huge black box around white type – with bullet points everywhere….but that menu IS horizontal now! LOL

Now to figure out how to get rid of the unwanted black box and bullet points! :)

And the email thing when I copied code….reminiscent of the NSA, wouldn’t you think?


Thanks for the code, if I get it working I will let you know :)


HI, thank you for the code, it did the job for me. Just one question, how can I centre the menu on the page. I saw that the only options are left, right or none?