Positioning my main nav below my centred logo. Image included - php

Question

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 -->

Answer 1

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.

Answer 2

Use margin-top and margin-left Property of css for this. Try different values of it will provide you solution.

Answer 3

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