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

CSS Modifications

Reader Interactions

Comments

Leave a Reply Cancel reply