How To Change Primary Navigation Color in Genesis

Are you looking for a genesis tutorial which will help you to change the primary navigation color of Genesis Framework? Then you are at the right place. Recently I have changed the default primary navigation color of my Genesis News Pro theme as per my requirement.

In this article I will share very easy to follow guide to change you primary navigation or secondary navigation color, width and design by following simple CSS tricks. You just need to apply these CSS codes to the proper places to get a navigation menu we are using for our website.

Simple CSS Tricks To Change Genesis Menu Color

Simply find out the below html tags in your CSS style sheet and replace the code accordingly, if you want to exact look & feel of genesis menu as per our theme. For different color combination or other elements please put your own color or data as per the below code.

Change Primary Navigation Color

.nav-primary {

background: #0000ff;
border-bottom: 1px solid #e3e3e3;

Change Secondary Navigation Color

.nav-secondary {
background: #0000ff;
color: #fff !important;

Change the menu item margin & alignment 

.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
margin-right: -4px; }

Change the Navigation menu height & font behavior

.genesis-nav-menu {
clear: both;
color: #000;
font-size: 12px;
font-weight: 700;
line-height: 2.5;
width: 100%;

There are many other CSS tags which can help you to change the look & behavior of genesis navigation menu and get something very professional and complex design as well. For a beginner, I think this is enough to change the navigation menu style of your genesis child theme. In case you have anything add to make this short genesis guide useful, please feel free to add your comment below.

How To Change Primary Navigation Color in Genesis
Rate this post

You May Also Like

About the Author: Santanu

Santanu is not a full-time blogger yet, but a blogger by heart. :) Loves to explore blogging tricks, affiliate marketing techniques, online income opportunities & the world of WordPress. I hope my honest attempt of sharing my blogging learning and income secrets will be helping newcomer bloggers to make their blog noticeable and money making.