How To Change Primary Navigation Color in Genesis

Like Tweet Pin it Share Share Email

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.