Sometimes the usual WordPress drop down navigation menu doesn’t quite work because the number of items is too long. You can use any of the popular mega menu plugins, but it’s quite simple to style a multi column or mega menu drop down navigation for Genesis themes using CSS.
Most Genesis child themes come with two menu locations – Primary Navigation Menu and Secondary Navigation Menu. They also have a Header Right widget area for a custom menu widget. In some child themes, the Secondary Navigation Menu has been moved to the footer area.
If you would like a new third menu location, it’s easy to add. Let’s assume you need both your Primary and Secondary Navigation Menus at the top of your website pages, and that you want to add the third menu, as a footer menu. This WordPress tutorial shows you how to add a footer menu to your Genesis child theme just above the footer widget area.
Read More » about Add Third or Footer Navigation Menu to Genesis Child Theme
Most Genesis themes now include responsive navigation menus for smaller screen sizes, and some add a responsive menu icon to several menu locations – header, primary, and secondary.
Perhaps you need to use two menus, but you have only a few menu items in the header navigation, like your membership area login and account, or for a store, just the account login and cart. You probably don’t ever want to hide membership, account, and cart menu items; you want them always accessible, like the image above.
Read More » about Add Responsive Menu Icon Only to Genesis Primary Navigation Menu
Genesis responsive menus (updated summer 2014) vary slightly from theme to theme, but most add a separate responsive icon into each navigation menu at smaller screen sizes. This keeps each navigation menu opening and closing independently.
But you may want to have only one responsive menu icon that opens and closes both the primary and secondary navigation menus at the same time in your Genesis theme. This is useful if your layout has the primary navigation positioned just above the secondary navigation, and especially, if you are using both the primary and secondary navigation for a split navigation menu with a centered logo (nav – logo – nav).
The responsive menu is created with a jQuery file – /js/responsive-menu.js – located in the child theme folder. This is the file that you can edit or replace to open and close both the primary and secondary navigation menus at the same time.
Read More » about Open Genesis Primary and Secondary Navigation with a Single Responsive Menu Icon
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.
Read More » about Add Buttons to Genesis Responsive Menu Icon and Indicators
You can add arrow indicators to your navigation menu drop downs in your Genesis theme with just a little bit of CSS. This will help your website visitors to see at a glance which menu items have more items hidden below them.
I like to use Dashicons for this because they are already enqueued in many Genesis themes, and because there are three types of arrows that you can choose.
You can view all the dashicons here. The arrows are in the section labeled “Sorting”.
Read More » about How to Add Arrow Indicators to Genesis Navigation Menus
If your website has a large drop down navigation menu, you may want to display it in the footer, so that it’s available at both the top and the bottom of your website pages. The footer menu can be left expanded.
You could use several widgets with menus in your footer, one for each top menu item. But this tutorial will show you how to use your main or primary menu in your footer, and style it so that it displays with sub-menu items below each top menu item, like in the image above. The details are for the Genesis sample theme (Genesis Sample 2.1.1), but you can apply this to any child theme.
Read More » about Add Expanded Primary Navigation Menu to Genesis Footer
Website headers are often quite compact with the logo and navigation sharing the header area. Genesis child themes have a Header Right widget area that allows you to add a Custom Menu to the header of your WordPress website. But what if you want the logo to be on top of a full width navigation menu for a ribbon effect? A lovely example of this is the website for Vanilla Bake Shop.
Today’s tutorial shows you one technique to add your logo on top of the the primary navigation in the Genesis sample child theme – image below. It is very basic and, of course, you would want to add some additional styles to create a decorative ribbon effect. You can look at these decorative borders with CSS to help you style your logo on top of your navigation menu ribbon.
Read More » about Add Logo on Top of Navigation Menu in a Genesis Child Theme
(Note: This tutorial is for older Genesis themes; it is not for any that are considered “accessibility ready”.)
Many of you have requested a tutorial, similar to my earlier responsive Genesis menu, to add a mobile navigation menu to the Header Right widget. Although many Genesis WordPress themes now have mobile navigation menus, this one is for the Genesis Sample theme. Having an easy-to-use mobile navigation menu is an important part of your mobile website design strategy.
A link to the code as a Github Gist is at the end.
Read More » about Mobile Responsive Header Menu for Genesis Sample Theme
Mobile responsive WordPress themes need navigation menus that are also mobile responsive, so that they can be used easily on devices with small screens. This custom Genesis WordPress theme uses a technique that hides the normal navigation with a mobile menu button on smartphones. This button technique is similar to that used by the WordPress default Twenty Twelve and Twenty Thirteen themes.
Mobile Navigation Demos
- This website – just grab the edge of your browser and make it narrower or view it on your phone
- Demo on a custom Genesis 1.9 website done last year