Add Logo on Top of Navigation Menu in a Genesis Child Theme

Website headers are often quite compact with the logo and navigation sharing the header area. Genesis child themes have a Header Right widget area that allows you to add a Custom Menu to the header of your WordPress website. But what if you want the logo to be on top of a full width navigation menu for a ribbon effect? A lovely example of this is the website for Vanilla Bake Shop.

Today’s tutorial shows you one technique to add your logo on top of the the primary navigation in the Genesis sample child theme – image below. It is very basic and, of course, you would want to add some additional styles to create a decorative ribbon effect. You can look at these decorative borders with CSS to help you style your logo on top of your navigation menu ribbon.

Step 1. Genesis Theme Settings

In your Genesis Theme Settings from your WordPress Dashboard, in the Header section, it says “Use for site title/logo:”, and you want to choose “Image Logo”.

Step 2. Move the Genesis Primary Navigation Before the Header

You can move your primary navigation above the header area. Open your Genesis child theme functions.php in a text editor and add this code to the bottom of the file.

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

Step 3. Add Styles to Move the Logo on Top of the Navigation Menu

Open your child theme style.css in a text editor. You may also add this CSS to a custom CSS editor plugin, if you like. An explanation of all the CSS is at the bottom of this tutorial.

You can add this CSS just before the Media Queries section.

/* 
Logo on top of Primary Nav
------------------------------------- */

.site-inner {
	padding-top: 80px;
	padding-top: 8rem;
}

.header-image .site-description {
	display: none;
	height: 0;
}

.header-image .site-header,
.header-image .site-header .wrap {
	background: none;
	padding: 0;
}

.header-image .site-title a {
	float: left;
	min-height: 164px;
	background: url(images/logo.png) no-repeat left;
	border: 1px solid #333;
	padding: 0;
	display: block;
	top: 40px;
	position: absolute;
	width: 360px;
}

.site-header .widget-area {
	display: none;
	height: 0;
}

/* Primary Navigation */
.nav-primary {
	background-color: #333;
	margin-top: 44px;
}

.nav-primary .genesis-nav-menu {
	float: right;
	width: auto;
	margin-left: 360px;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: left;
}

.nav-secondary {
	margin-top: 40px;
}

Step 4. Add Styles For Centered Logo For Mobile

Many Genesis child themes have the logo and navigation centered at smaller screen sizes. For this tutorial you can add some CSS to keep the same centered look as the default sample child theme. You could also add a mobile navigation menu to keep the ribbon effect for mobile.

Find this section in the Media Queries section:

@media only screen and (max-width: 1023px) {
[...]
}

Add the following CSS to the bottom of this media query section just before the closing bracket – }.

/* 
Logo Centered Again
------------------------------------- */

.site-inner {
	padding-top: 40px;
	padding-top: 4rem;
}

.header-image .site-header .wrap {
	background-position: none;
}

.header-image .site-title {
	margin: 0;
}

.header-image .site-title a {
	border: 0;
	float: none;
	background: url(images/logo.png) no-repeat center top;
	position: relative;
	margin: 0 auto;
	max-width: 360px;
}

.nav-primary {
	margin-top: 0;
}

.nav-primary .genesis-nav-menu {
	float: none;
	margin-left: 0;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: none;
}

.nav-secondary {
	margin-top: 0;
}

And there you have it – a good start to a new look for your header and website navigation.

Explanation of the CSS in Step 3

This moves the content area down, so there is padding between the content and the logo. You may not need the extra padding, especially if you are also using the secondary navigation menu.

.site-inner {
	padding-top: 80px;
	padding-top: 8rem;
}

This CSS keeps the site description from displaying.

.header-image .site-description {
	display: none;
	height: 0;
}

This section removes the default image logo from ‘.header-image .site-header .wrap’, and also removes any extra padding.

.header-image .site-header,
.header-image .site-header .wrap {
	background: none;
	padding: 0;
}

This CSS adds the logo, positions it, and adds a border around it; you may not want the border. The min-height is the height of your logo, and width is the width of your logo. The ‘top: 40px;’ will need to be adjusted to fit your logo.

.header-image .site-title a {
	float: left;
	min-height: 164px;
	background: url(images/logo.png) no-repeat left;
	border: 1px solid #333;
	padding: 0;
	display: block;
	top: 40px;
	position: absolute;
	width: 360px;
}

The next section just makes sure that the Header Right widget area does not display.

.site-header .widget-area {
	display: none;
	height: 0;
}

Now let’s look at the navigation CSS. The first section just adds a background-color to the navigation and adds a margin at the top. You can adjust the background-color and the margin to match your logo.

.nav-primary {
	background-color: #333;
	margin-top: 44px;
}

The next section adds a left margin to the primary navigation, so that the menu items don’t slide beneath the logo. The margin needs to be at least the width of your logo. It also keeps the navigation to the right.

.nav-primary .genesis-nav-menu {
	float: right;
	width: auto;
	margin-left: 360px;
}

This floats each menu item to the left.

.nav-primary .genesis-nav-menu .menu-item {
	float: left;
}

And then finally, if you use the secondary navigation, you want it to remain below the logo, so add a top margin.

.nav-secondary {
	margin-top: 40px;
}

Explanation of the CSS in Step 4

This CSS moves the content area back to the default position, if you added more top padding in the Step 3.

.site-inner {
	padding-top: 40px;
	padding-top: 4rem;
}

This adjusts the logo CSS, so that it is centered, as in the default. It also removes the border around the logo; you can remove that line if you want to keep the border.

.header-image .site-title a {
	border: 0;
	float: none;
	background: url(images/logo.png) no-repeat center top;
	position: relative;
	margin: -40px auto 0;
}

These navigation styles just remove the styles you added to the logo and navigation above, so that the logo is centered below the primary navigation.

.nav-primary {
	margin-top: 0;
}

.nav-primary .genesis-nav-menu {
	float: none;
	margin-left: 0;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: none;
}

.nav-secondary {
	margin-top: 0;
}

And that’s the end of the CSS explanations, so you can get started.