Navigation Menus Archives - Amethyst Website Design

Genesis Tutorials

Mega Menu Navigation for Genesis Themes using CSS

Sometimes the usual WordPress dropdown 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 mega menu for Genesis themes using only CSS.
Genesis Tutorials

Add Third or Footer Navigation Menu to Genesis Child Theme

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…
Genesis Tutorials

Add Responsive Menu Icon Only to Genesis Primary Navigation Menu

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…
Genesis Tutorials

Open Genesis Primary and Secondary Navigation with a Single Responsive Menu Icon

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…
Genesis Tutorials

Add Buttons to Genesis Responsive Menu Icon and Indicators

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…
Genesis Tutorials

How to Add Arrow Indicators to Genesis Navigation Menus

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. This tutorial works for all Genesis themes. If your theme already uses icons,…
Genesis Tutorials

Add Expanded Primary Navigation Menu to Genesis Footer

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…
Genesis Tutorials

Add Logo on Top of Navigation Menu in a Genesis Child Theme

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…
Genesis Tutorials

Mobile Responsive Header Menu for Genesis Sample 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…
Genesis Tutorials

Responsive Website Navigation for Genesis WordPress Themes

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…