Style Genesis Menus with Gradients and Images

Mention the Genesis theme framework to the web developers I know and you will always hear good reviews.

The idea behind WordPress theme frameworks is that they make theme design simple. A parent theme loaded with easy to access features provides a canvass that can be molded into different designs. Those designs are built as child themes.

Genesis is feature rich and very well written. There are hundreds of child themes for Genesis. StudioPress – the team behind Genesis – has 43 plus child themes of its own and a new one is released every month.

Used with Dynamik – an overlay that opens up the power of Genesis for easy use, Genesis becomes an incredibly malleable framework for those with little or no design skill and little code knowledge.

One way to add a little design elegance to any theme is to style the menus.

Genesis menus are easy to style with a little CSS to add images, gradients, borders and shadow:

  • Use images instead of menu tab texts
  • Add background images to the tabs
  • Make borders thicker
  • Create menu gradients
  • Add box shadows

Except for gradients, all the above can be done visually with Dynamik.

When not using Dynamik or when you are using Dynamik and need to add a background gradient, you need to use the CSS selectors shown below for the different menu levels.

For each case, add CSS between the brackets ( {} ).

An awesome place to generate shadows and gradients is CSS3Generator.

When you need to centre Genesis menu tabs, read the guide here.

Using Dynamik's CSS builder to build and preview changes live
Using Dynamik’s CSS builder to build and preview changes live

CSS selectors for the header menu

These selectors are for any custom menu put into the header widget.

#header .menu,
#header .menu a {

}

#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover {

}

#header .menu li ul li,
#header .menu li ul li a {

}

#header .menu .current_page_item li ul li a,
#header .menu .current-cat li ul li a,
#header .menu .current-menu-item li ul li a,
#header .menu li ul li a:active,
#header .menu li ul li a:hover {

}

CSS selectors for the primary nav bar

These selectors affect the menu usually positioned below the header.

#nav,
#nav a {

}

#nav .current_page_item a,
#nav .current-cat a,
#nav .current-menu-item a,
#nav li a:active,
#nav li a:hover {

}

#nav li ul li,
#nav li ul li a {

}

#nav .current_page_item li ul li a,
#nav .current-cat li ul li a,
#nav .current-menu-item li ul li a,
#nav li ul li a:active,
#nav li ul li a:hover {

}

CSS selectors for the secondary menu

These selectors are used to style the menu that’s usually placed above the header.

#subnav,
#subnav a {

}

#subnav .current_page_item a,
#subnav .current-cat a,
#subnav .current-menu-item a,
#subnav li a:active,
#subnav li a:hover {

}

#subnav li ul li,
#subnav li ul li a {

}

#subnav .current_page_item li ul li a,
#subnav .current-cat li ul li a,
#subnav .current-menu-item li ul li a,
#subnav li ul li a:active,
#subnav li ul li a:hover {

}

When not using Dynamik, put the CSS into the child theme’s style.css sheet or add it through Genesis > Theme Settings > Header Scripts.

Genesis theme settings can be used to add CSS
Genesis theme settings can be used to add CSS

I highly recommend Dynamik for Genesis child theme develoment.

Sharing is caring!

Subscribe
Notify of
guest

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

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x