I'm having a nightmare trying to center a logo in the header on a WP template. Can anyone please work out the following code and center the logo?
CSS
/**
* Header
* --------------------------------------------------------------------------- */
#header {
padding-top: 3em;
margin-bottom: 2.5em; }
#header #branding {
*zoom: 1;
max-width: 80%;
display: inline-block;
text-align: left; }
#header #branding:before, #header #branding:after {
content: " ";
display: table; }
#header #branding:after {
clear: both; }
#header #site-title {
display: inline-block;
margin: 0;
font-size: 2.25em;
text-align: left; }
#header #site-title a {
display: inline-block;
text-align: inherit; }
#header #site-title img {
display: block;
text-align: inherit;
margin: 0 auto;
vertical-align: baseline; }
#header.with-woocommerce #branding {
max-width: 100%;
display: block;
text-align: center;
margin-bottom: 2em; }
#header.with-woocommerce #site-title {
text-align: center; }
#header.with-woocommerce #site-title a {
display: block; }
PHP
<header id="header" class="<?php echo $hclass; ?>">
<hgroup id="branding">
<h1 id="site-title" role="logo">
<a href="<?php echo trailingslashit( esc_url( home_url() ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
<?php if ( get_theme_mod( 'bearded_logo' ) ) : ?>
<img src="<?php echo esc_url( get_theme_mod( 'bearded_logo' ) ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<?php else : bloginfo( 'name' ); endif; ?>
</a>
</h1>
<h2 id="site-description" class="hide-for-small"><?php bloginfo( 'description' ); ?></h2>
</hgroup><!-- #branding -->
<hgroup id="navigation" role="navigation" >
<?php do_atomic( 'before_nav' ); ?>
<?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>
<?php do_atomic( 'after_nav' ); ?>
</hgroup>
</header><!-- #header -->
Please help. Thank you - any advice would be much appreciated!
Add to CSS:
#site-title img {
margin-left: 45%;
}
Based off your more recent changes to the site you can add this to center the logo
#header #branding, #header.with-woocommerce #branding {
display: table;
margin: 0 auto;
}
If you go back to where the shop-nav is not full width I would make the header position relative and absolute position the shop-nav top right 0.
Give id="site-title" a margin-left: 43%
Related
I am working on a wordpress site and I am not very familiar with PHP.
Somehow I have managed to produce the following empty line below the image:
http://i.imgur.com/PazQgLl.jpg
So my question is how I can remove or avoid having this empty space below the image.
Here is the PHP for the page. The cause has to be in here somewhere, I think.
<?php
/**
* The template part for displaying the post meta information
*
* #package Editor
*/
?>
<div class="entry-meta">
<!-- Grab and display the featured image -->
<?php if ( '' != get_the_post_thumbnail()) {?>
<a class="frontfeatured-image" href="<?php the_permalink()?>">
<?php the_post_thumbnail('thumbnail-image')?>
</a>
<?php }?>
<!--
<ul class="meta-list">
<?php if ( has_category() ) { ?>
<li class="meta-cat"><?php the_category( ', ' ); ?></li>
<?php } ?>
<?php $posttags = get_the_tags(); if ( $posttags ) { ?>
<li class="meta-tag"><?php the_tags( '' ); ?></li>
<?php } ?>
<?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
<li class="meta-comment">
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'editor' ), __( '1 Comment', 'editor' ), __( '% Comments', 'editor' ) ); ?></span>
</li>
<?php endif; ?>
</ul>
-->
</div>
CSS:
.entry-meta {
display: inline-block;
width: 40%;
margin-right: 10px;
vertical-align: top;
border-width: 10px;
border-color: #000000;
border-style: solid;
}
#media (max-width: 768px) {
.entry-meta {
margin-bottom: 0%;
width: 100%;
}
}
.frontfeatured-image {
display: inherit;
border-style: solid;
border-color: #000000;
border-width: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 100%;
-webkit-filter: grayscale(1);
filter: grayscale(1);
-moz-transition:-moz-transform 0.5s ease-in;
-webkit-transition:-webkit-transform 0.5s ease-in;
-o-transition:-o-transform 0.5s ease-in;
-moz-transition:-moz-transform 0.5s ease-out;
-webkit-transition:-webkit-transform 0.5s ease-out;
-o-transition:-o-transform 0.5s ease-out;
}
.frontfeatured-image:hover{
-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-o-transform:scale(1.02);
color: #000000;
}
Try this
.frontfeatured-image img{
float: left;
}
What happens when you apply the following style on your image?
.frontfeatured-image img{
display: inline-block;
}
I'm trying to make page of posts basing on the example from wordpress codex.
I am using a beautiful WP theme (Radcliffe) and have no success in combining it with mentioned example.
The page I've created works, indeed, but posts are overlapped, one on another. Below it there is a lot of white space and, in the end, the footer at the very bottom of this page.
My page looks like that for now:
<?php get_header(); ?>
<div class="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
wp_reset_postdata();
endwhile;
endif;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'category_name' => 'testy',
'paged' => $paged
);
$list_of_posts = new WP_Query( $args );
?>
<?php if ( $list_of_posts->have_posts() ) : ?>
<?php /* The loop */ ?>
<?php while ( $list_of_posts->have_posts() ) : $list_of_posts->the_post(); ?>
<?php // Display content of posts ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<div class="posts">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$total_post_count = wp_count_posts();
$published_post_count = $total_post_count->publish;
$total_pages = ceil( $published_post_count / $posts_per_page );
if ( "1" < $paged ) : ?>
<div class="page-title section small-padding">
<h4 class="section-inner"><?php printf( __('Page %s of %s', 'radcliffe'), $paged, $wp_query->max_num_pages ); ?></h4>
</div>
<div class="clear"></div>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endwhile; ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div class="archive-nav">
<?php echo get_next_posts_link( '« ' . __('Older posts', 'radcliffe')); ?>
<?php echo get_previous_posts_link( __('Newer posts', 'radcliffe') . ' »'); ?>
<div class="clear"></div>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
could somebody please show me my mistake?
this the css for the page content, maybe someone could take a look?
I still think the problem is somewhere in php code, I haven't touch the css yet since I've installed this theme.
.post { position: relative; }
.posts .post.has-featured-image { min-height: 266px; }
/* featured media */
.featured-media {
position: relative;
display: block;
width: 100%;
max-height: 682px;
}
a.featured-media:hover { opacity: 0.75; }
.featured-media > img {
visibility: hidden;
display: block;
margin: 0 auto;
}
.media-caption-container {
position: absolute;
bottom: 5%;
right: 5%;
left: 5%;
text-align: center;
}
.media-caption {
display: inline-block;
padding: 9px 12px;
border-radius: 3px;
background: #444;
background: rgba(17,17,17,0.5);
font-size: 0.8em;
line-height: 120%;
font-weight: 400;
font-style: italic;
color: #fff;
}
.media-caption:hover { background-color: rgba(17,17,17,0.75); }
/* post header */
.post-header { display: block; }
a.post-header { position: static; }
a.featured-media + a.post-header { position: absolute; }
a.post-header {
background: #BFBFBF;
background: rgba(17,17,17,0.35);
bottom: 0;
left: 0;
right: 0;
color: #FFF;
padding-left: 10px;
padding-right: 10px;
}
a.post-header:hover {
background: #333;
background: rgba(17,17,17,0.75);
color: #FFF;
}
.post.no-featured-image a.post-header { position: static; }
.post.no-featured-image a.post-header:hover { background: #333; }
a.post-header:hover .post-title { color: #CA2017; }
.post-meta-top {
text-transform: uppercase;
color: #FFF;
font-size: 0.9em;
letter-spacing: 1px;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
.post-meta-top .sep {
color: #CCC;
margin: 0px 5px;
font-weight: 400;
}
a.post-header .post-meta-top .sep {
color: #fff;
color: rgba(255,255,255,0.5);
text-shadow: none;
}
.sticky .post-meta-top { display: block; }
.post-title {
font-family: 'Abril Fatface', serif;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
a.post-header .post-title {
max-width: 90%;
margin-left: auto;
margin-right: auto;
text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
Finally learning HTML5 and CSS, but for some reason I can't get my code displaying properly. Everything shows up the way I want it to except for "topad," which is just not showing up at all. If I remove the id from the div line, it shows up without a problem.
I know my code is probably a mess, but I just want to know why nested divs won't display the way I'm expecting (side by side).
HTML:
<div id="branding" class="clearfix">
<div id="toplogo">
<?php if ( ! is_singular() ) { echo '<h1>'; } ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( get_bloginfo( 'name' ), 'blankslate' ); ?>" rel="home">
<img src="<?php echo esc_url( home_url( '/' ) ); ?>wp-content/themes/smcomics/images/logo.jpg" />
</a>
<?php if ( ! is_singular() ) { echo '</h1>'; } ?>
</div>
<div id="topad">blahblahblah</div>
</div>
CSS:
body {
width: 1000px;
margin-left:auto;
margin-right:auto;
background-color: #ddd;
}
#header {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #f9b7d3
}
#branding {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #a1b2c3;
}
#toplogo {
width: 237;
height: 100;
float: left;
}
#topad {
width: 728;
height: 90;
float: right;
background-color: #023452;
}
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
You missed to write PX in your css for id's toplogo and topad
#toplogo {
width: 237px;
height: 100px;
float: left;
}
#topad {
width: 728px;
height: 90px;
float: right;
background-color: #023452;
}
I was wondering how I can achieve an effect similar to this website. When you scroll down the site the logo disappears but the menu remains fixed:
http://www.nowness.com/
This is my site: http://www.itsalifestylething.co.uk/quick-cupcake-catch-up/
PHP
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<h1 class="site-title"><img src="http://www.itsalifestylething.co.uk/wp-content/uploads/2013/11/logo-large.png" /></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</header><!-- #masthead -->
<div id="main" class="wrapper">
CSS
/* Header
------------------------------------------------------------ */
.site-header {
padding: 5px 0 !important;
}
hgroup {
width: 100%;
}
#masthead {
width: 960px;
margin: 0 auto;
position: relative;
}
h1.site-title {
margin: 0 auto;
width: 480px;
height: 123px;
}
.social img {
margin-right: 15px;
}
/* Nav
------------------------------------------------------------ */
.main-navigation {
width: 100%;
margin: 0px !important;
}
.main-navigation div.nav-menu > ul {
border: 0px !important;
margin: 0 auto;
width: 430px;
}
.main-navigation li {
margin: 0 25px 0 0;
}
.main-navigation li ul {
padding-top: 2px;
z-index: 10;
}
.main-navigation li a:hover, .main-navigation .current_page_item > a {
color: #33d898;
font-weight: normal;
}
.main-navigation li ul {
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
width: 200px;
}
.main-navigation li ul li a {
background: #ffffff;
border-bottom: 1px solid #e7e7e7
}
.main-navigation li ul li a:hover {
background: #ffffff;
color: #33d898;
}
.nav-menu {
border-bottom: 1px solid #e7e7e7;
}
This is how I would go about it with html, css, and jQuery.
First this is how I would order my html,
<nav>
<span class="logo">Your Logo</span>
<ul>
<li id="logo">Your Logo</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
Next the css,
html, body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav {
width: 80%;
background: #c1c1c1;
position: fixed;
top: 0;
left: 50%;
margin-left: -40%;
}
nav li {
display: inline-block;
cursor: pointer;
}
#logo {
display: none;
}
#logo.scroll {
display: inline-block;
}
.logo {
font-size: 50px;
font-family: "century gothic";
}
and finally the little bit of jQuery,
$(window).scroll(function() {
$('.logo').hide();
$('#logo').addClass('scroll');
if ($(window).scrollTop() === 0) {
$('.logo').show();
$('#logo').removeClass('scroll');
}
});
Here is a jsfiddle, Link.
You have to use javascript to add a position: fixed to your header. Also you need to give your body an offset.
nav-menu-static {
position: fixed;
top: 0;
background: #fff;
width:960px
}
#masthead {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
position: fixed;
width: 960px;
}
Then set the margin-top for the .site-content class
Hi I would like to edit my css making my main nav go below my logo which will be centered.
It looks like this right now
I want it to look like this
This is what my css looks like. Thank you very much for any help I can get
/* -- header layout -- */
#masthead .row {
height: 100%; }
#masthead .header-container {
display: table;
height: 100%;
width: 100%; }
#masthead .left-links {
display: table-cell;
vertical-align: middle; }
#masthead .right-links {
display: table-cell;
vertical-align: middle; }
#masthead .left-links > ul {
float: left;
padding-top: 15px;
margin-left: 15px; }
#masthead .right-links > ul {
float: right;
padding-top: 15px; }
/* -- sticky header -- **/
#masthead.stuck {
opacity: 0.95;
position: fixed;
top: -200px;
left: 0;
right: 0;
z-index: 100;
-webkit-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2); }
#masthead.stuck:hover {
opacity: 1; }
#masthead.stuck.move_down {
height: 70px;
top: 0; }
#masthead.stuck.move_down .catalog-mode-header, #masthead.stuck.move_down .left-links > ul, #masthead.stuck.move_down .right-links > ul,
#masthead.stuck.move_down #logo a {
padding: 0 !important; }
#masthead.stuck.move_down #logo a {
float: none; }
#masthead.stuck.move_up {
top: -300px; }
/* -- boxed header style --*/
.boxed #masthead {
max-width: 71.25em;
width: 100%;
left: auto;
right: auto; }
.boxed #masthead.stuck {
left: auto;
right: auto; }
/* -- centered logo -- */
.logo-center #masthead .left-links {
width: 40%; }
.logo-center #masthead .right-links {
width: 40%; }
.logo-center #masthead #logo {
width: 20%;
text-align: center; }
.logo-center #masthead .left-links > ul {
margin-left: 0; }
.logo-center #masthead .left-links > ul > li {
margin-left: 0;
margin-right: 20px; }
/* -- navigation -- */
ul.header-nav {
margin: 0; }
ul.header-nav li {
float: left;
margin-left: 20px;
list-style: none; }
ul.header-nav li a {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
transition: all 200ms ease-out;
text-transform: uppercase;
font-size: 80%;
font-weight: bold;
padding: 10px 0; }
.right-links > ul.header-nav {
white-space: nowrap; }
.right-links > ul.header-nav > li {
display: inline-block !important;
float: none; }
/* -- navigation -- */
ul.header-nav {
margin: 0; }
ul.header-nav li {
float: left;
margin-left: 20px;
list-style: none; }
ul.header-nav li a {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
transition: all 200ms ease-out;
text-transform: uppercase;
font-size: 80%;
font-weight: bold;
padding: 10px 0; }
.right-links > ul.header-nav {
white-space: nowrap; }
.right-links > ul.header-nav > li {
display: inline-block !important;
float: none; }
HTML
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<?php _e('Login', 'woocommerce'); ?>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
There are quite a few things that we need to look at here, I will list them one by one.
The contents are currently displayed as table-cell with the left-links, logo and right-links as 3 cells (each having a unique width). Hence, it is not possible to achieve the expected structure without modifying the HTML also.
First move the entire div with class as left-links to be outside the div with class as large-12 columns header-container. Change the CSS display property for left-links to be table-row (consider that the same as what a <tr> tag would do).
Change the display for #masthead .header-container also to be table-row and height to 75%. So effectively the logo and right-links are part of the first row in the table and left-links is part of the second row.
Change the width for the logo to be 100% so that it takes the entire width and gets centered.
Finally remove float for ul.header-nav li and set the display for #masthead .left-links > ul as table-cell.
Note: This is more a hacky solution than an optimal one. But this keeps the changes to the mark-up as minimal as possible.
Note 2: The position of the drop-down menus are getting affected a bit due to all these changes. I will update the answer once I have a solution for that also.
Use margin-top and margin-left Property of css for this. Try different values of it will provide you solution.
I have created a demo on codepen, check if this help you.
If you are supporting IE7 then you need to give width to ".headerLeft".
I have commented that code in css.
click here for demo