• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

News Pro Theme

Reader Interactions

Comments

  1. Claus Wessel says

    May 23, 2017 at 10:37 am

    Excellent ! Thank you

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems