WP SITES

2123

Original Genesis Tutorials & 5000+ Code

Snippets

Header Right

Free Tutorial

Add Foodie Pro Nav Menu Item Styling To News Pro

This CSS changes the styling for the top level menu items in News Pro to Foodie Pro. Its a basic modification you can make under the Site Navigation section of the News Pro child themes style.css file.

Firstly, here’s the default:

And here’s the Foodie Pro styling added to News Pro:

CSS Modifications

Around line 1354, comment out or remove the following CSS rules:

/* Site Navigation
-------------------------------*/
/*
.genesis-nav-menu {
	clear: both;
	color: #000;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	width: 100%;
}

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

.genesis-nav-menu a {
	border-right: 1px solid #e3e3e3;
	color: #000;
	display: block;
	padding: 20px 24px;
	position: relative;
}

.genesis-nav-menu a:focus,
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
	background-color: #000;
	color: #fff;
}

.genesis-nav-menu > .menu-item > a {
	text-transform: uppercase;
}
*/

Add the following CSS in its place :

/*
Foodie Pro Site Navigation ( Start )
----------------------------------------------------------------------------- */

.site-header {
    border-bottom: none;
}

.genesis-nav-menu {
	background: #fff;
    border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
	clear: both;
    font-family: 'Karla', Arial, Helvetica, sans-serif;
	font-size: .001px;
    font-weight: 600;
	letter-spacing: 2px;
	line-height: 1;
	padding: 7px 0;
	width: 100%;
}

.genesis-nav-menu aside {
	display: inline-block;
	height: 32px;
	vertical-align: middle;
    width: auto;
}

.genesis-nav-menu .menu-item {
	display: inline-block;
	font-size: 12px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	text-align: left;
}

.genesis-nav-menu a {
	color: #010101;
	display: block;
	padding: 17px 21px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu a:focus,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus {
	color: #fb6a4a;
}

.genesis-nav-menu a.last {
    padding-right: 0;
}

/*
Foodie Pro Site Navigation ( End )
----------------------------------------------------------------------------- */

Main navigation