WP SITES

2555

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

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 )
----------------------------------------------------------------------------- */