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

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.

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.

Comments

    • says

      Hi Nick, you can send me a private message. Best way to get me is via my business email address of leehodson at vizred.com. Look forward to hearing from you soon.

  1. kismetique says

    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?

    • says

      But it got you to leave a comment :p

      What you could do is look at your theme’s CSS for the menu CSS used in it. Use that CSS to style your custom menu. Works a treat.

      Edit to add: I usually read the copy notification emails. Get hundreds a day. Just a nice way for me to really get to know how useful my content is and it deters content thieves.

Leave a Reply