katstar01
8/6/2016 - 12:15 AM

Header with center navigation and site title

Header with center navigation and site title

.site-branding{
display:block;
margin: 0 auto;
width:100%;
}
.site-title {
  text-align:center;
}
.site-header{
width:100%;
height:auto;
}

.wrap {
 width:90%;
 display:block;
 margin:0 auto;
}

.main-navigation {
  clear: both;
  display:block;
  text-align:center;
  font-size:14px;
	float:right;
	font-weight: 600;
	line-height: 1;
	width: 100%;
}

.main-navigation ul {
  margin-left:0;
}

.main-navigation .menu-item {
	display: inline-block;
	margin-bottom: 0;
	padding-bottom: 0;
	text-align:center;
}

.main-navigation a {
	color: #333;
	text-decoration: none;
	display: block;
	padding: 12px 20px;
}

.main-navigation .right.date {
	padding: 32px 20px;
}

.main-navigation .right.rss a {
	float: left;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .sub-menu .current-menu-item > a:hover,
.main-navigation .sub-menu .current-menu-item > a:focus  {
	color: #c3251d;
	text-decoration: underline;
}

.main-navigation .sub-menu {
	border-top: 1px solid #eee;
	left: -9999px;
	opacity: 0;
	position: absolute;
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition:    opacity .4s ease-in-out;
	-ms-transition:     opacity .4s ease-in-out;
	-o-transition:      opacity .4s ease-in-out;
	transition:         opacity .4s ease-in-out;
	width: 200px;
	z-index: 99;
}

.main-navigation .sub-menu a {
	background-color: #fff;
	border: 1px solid #eee;
	border-top: 0;
	font-size: 14px;
	padding: 20px;
	position: relative;
	width: 200px;
	word-wrap: break-word;
}

.main-navigation .sub-menu .sub-menu {
	margin: -56px 0 0 199px;
}

.main-navigation .menu-item:hover {
	position: static;
}

.main-navigation .menu-item:hover > .sub-menu {
	left: auto;
	opacity: 1;
}

.main-navigation > .first > a {
	padding-left: 0;
}

.main-navigation > .last > a {
	padding-right: 0;
}

.main-navigation > .right {
	float: right;
}