Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Logo Centered on Navigation Menu
/**********************************
*
* Add a centered logo to the Genesis Navigation Menu
* using CSS only
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
************************************/
/*
*
* Header and Logo
*
*/
.site-header > .wrap {
position: relative;
padding: 0 30px;
}
.title-area {
padding: 0;
}
h1.site-title {
width: 180px;
height: 100px;
position: absolute;
left: 0;
right: 0;
top: 20px;
margin: 0 auto;
background-color: #ddd;
border-radius: 5px;
}
.site-title a,
.site-title a:hover {
background: url(../images/ab-logo-rd-80.png) no-repeat center;
display: block;
text-indent: -9999px;
width: 180px;
height: 100px;
}
h2.site-description {
display: none;
}
/*
*
* Navigation
*
*/
.nav-primary {
margin-top: 30px;
}
.nav-primary > .wrap {
max-width: 100%;
padding: 0;
}
ul.genesis-nav-menu {
clear: both;
color: #999;
display: table;
float: none;
font-family: Lato,sans-serif;
line-height: 1.5;
margin: 0 auto;
width: auto;
}
ul.genesis-nav-menu > li:first-child {
margin-left: 37px; /* adjust number to center nav around logo */
}
.nav-primary .split-right {
margin-left: 180px; /* logo width - .site-title, .site-title a */
}
/*
* Responsive styles for Sample theme
*
*/
@media only screen and (max-width: 1023px) {
/*
*
* Navigation
* Remove ".site-container" for your use
* .site-container used here because of conflict with our mobile navigation
*
*/
.nav-primary {
margin-top: 37px;
}
.genesis-nav-menu a {
font-size: 13px;
}
ul.genesis-nav-menu > li:first-child {
margin-left: 29px; /* adjust number to center nav around logo */
}
}
@media only screen and (max-width: 768px) {
h1.site-title {
margin: 30px auto;
position: static;
}
}
<?php
//* Do NOT include the opening php tag
//* Remove the header right widget area
unregister_sidebar( 'header-right' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.