3 posts are displayed and under each of them there is a thin 1px border line - the last (3rd) post should not have this border. How to do that?
Code:
<?php
$args = array( 'numberposts' => 3 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<!-- TITLE -->
<div class="proponowanytitle">
<?php the_title(); ?>
</div>
<!-- DATE -->
<div class="proponowanydate">
<?php the_time('m F Y');?>
</div>
<?php endforeach; ?>
CSS:
.proponowanytitle {
color:#34a694;
font-size:13px;
font-weight:400;
padding:15px 0 0 0;
margin:0;
}
.proponowanydate {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
border-bottom:1px solid #e2e2e3;
}
.proponowanydate:last-child {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
}
It doesn't work, i tried :not(:last-child) as well. Can anyone help me set the last-child?
As mentioned in the other comment, you can use the :last-child pseudo class. However, you need to make sure the last .proponowanydate is the last child of it's parent.
To make sure this happens, add in a wrap/container div:
HTML/PHP
<div class="container">
<?php
$args = array( 'numberposts' => 3 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<!-- TITLE -->
<div class="proponowanytitle">
<?php the_title(); ?>
</div>
<!-- DATE -->
<div class="proponowanydate">
<?php the_time('m F Y');?>
</div>
<?php endforeach; ?>
</div>
CSS
.proponowanytitle {
color:#34a694;
font-size:13px;
font-weight:400;
padding:15px 0 0 0;
margin:0;
}
.proponowanydate {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
border-bottom:1px solid #e2e2e3;
}
.proponowanydate:last-child {
border-bottom: none;
}
Use the CSS :last-child selector after adding a parent element. See here.
.proponowanydate:last-child{
border-bottom: none;
}
Related
I'm breaking my head to make this code work, see.
I can list my wordpress articles by letter.
But I can't do the same so that it shows articles that start with numbers.
See my code
<ul>
<?php
//get all post IDs for posts beginning with cap B, in title order,
//display posts
$first_char = '0';
$postids=$wpdb->get_col($wpdb->prepare("
SELECT ID
FROM $wpdb->posts
WHERE SUBSTR($wpdb->posts.post_title,1,1) = %s
ORDER BY $wpdb->posts.post_title",$first_char));
if ($postids) {
$args=array(
'post__in' => $postids,
'post_type' => ' ',
'tag' => 'anime-dublado',
'orderby' => 'title',
'order' => 'ASC',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo ' '. $first_char;
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<style>
.thumbnail{
position:
z-index: 0;
}
.thumbnail:hover{
background-color:
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
margin-top: 190px;
background-color: #d3d5d9;
padding: 5px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 360px; /*position where enlarged image should offset horizontally */
}
</style>
<li>
<div class="manga-body">
<div class="thumb">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); }?>
<a class="thumbnail" href="#thumb">
<?php echo catch_that_image(52, 50) ?>
<span>
<?php echo catch_that_image(auto, auto) ?>
</span>
</a>
</div>
<div class="manga-list">
<h2> <?php the_title(); ?></h2>
</div>
<div class="" style="font-weight: margin-top: 20px;">
<div class="waktu"></div>
</div>
</div>
</li>
<?php
endwhile;
}
wp_reset_query(); // Restore global post data stomped by the_post().
}
?>
</ul>
I already tried to change that part $ first_char = '0-9'; for only one number but only 1 article appears.
I would like the code to show all articles that start with numbers only.
I could get it to work if I could put in that code $ first_char = '0,1,2,3,4,5,6,7,8,9,'; but I can't do that
Maybe this work:
$first_char = "('0','1','2','3','4','5','6','7','8','9')";
And in the SQL query change "=" for "IN"
WHERE SUBSTR($wpdb->posts.post_title,1,1) IN %s
I have this section on my website:
This is on my homepage, pulling through items of a custom post type called products.
Each product has it's own product colour, I've allowed the user to select this from an Advanced Custom Field Colour Picker.
I've created the Arrows using CSS :before and :after (one for the line and one for the arrow head), so I could colour them using the product colour ACF.
This would mean I would have to apply the colour inline, inside the template. But as I have used Pseudo classes, I don't believe I can style them inline.
To get around this I added a style block inside my loop... This seems to work but it's only taking the yellow colour as I assume it's the first colour it finds...
Is there a way around this? I'm not sure if I'm making it too complex...
Here's the separate CSS from the CSS document:
.products-item-inner .arrow-right:after {
content: "";
border: solid;
/* border-color: <?php the_field('product_colour'); ?>; */
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
/* background-color: <?php the_field('product_colour'); ?>;*/
content: "";
display: inline-block;
vertical-align: middle;
}
Here's the template loop with the added CSS <style> inline:
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer">
<div class="col-12 products-item-inner">
<style type="text/css">
.products-item-inner .arrow-right:after { border-color: <?php the_field('product_colour'); ?>; }
.products-item-inner .arrow-right:before { background-color: <?php the_field('product_colour'); ?>; }
</style>
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
Thanks for looking :)
Older browser support method
For maximum browser support, you can use the style attribute to assign a colour to your .arrow-right element, and can leverage currentColor in its pseudo-elements:
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer">
<div class="col-12 products-item-inner">
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right" style="color: <?php the_field('product_colour'); ?>;"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
.products-item-inner .arrow-right:after {
content: "";
border: solid;
border-color: currentColor;
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
background-color: currentColor;
content: "";
display: inline-block;
vertical-align: middle;
}
CSS Custom Property method
You could also use a CSS custom property, if you need the colour in more than one spot, where the method above won't work (unless you repeat the colour definition in several places).
I added it to your .products-item-outer element as a style attribute. This will cascade down into your .arrow-right pseudo-elements. I also added a fallback colour of rebeccapurple in this example, in case the value is missing.
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
.products-item-inner .arrow-right:after {
content: "";
border: solid;
border-color: var(--product-color, rebeccapurple);
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
background-color: var(--product-color, rebeccapurple);
content: "";
display: inline-block;
vertical-align: middle;
}
On the front page of my site I have 3 posts being pulled, with a div underneath each that is a link. I need each of the 3 divs to be a different color. New posts in this category are going to be displayed here as they are posted, but it will just display the most recent three. I need to make it so that the three "hear more >" divs are always the same color. Below are pics and the code.
How is it currently:
How I need it to be:
HTML:
<?php
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="success-stories-div">
<div class="success-stories-text">
<p style="font-size: 120%;">Success Story</p>
<?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<div class="success-stories-link">Hear More >
</div>
</a>
</div>
<?php endwhile; wp_reset_query(); ?>
CSS:
.success-stories .success-stories-link {
margin-top: 1em;
width: 465px;
height: 50px;
background-color: #F4B147;
padding: 12px 0 0 15px;
}
you can use selector
example:
<style>
div{
margin-top: 1em;
width: 465px;
height: 50px;
padding: 12px 0 0 15px;
}
div.success-stories-link:nth-child(1) {
background: green;
}
div.success-stories-link:nth-child(2) {
background: yellow;
}
div.success-stories-link:nth-child(3) {
background: red;
}
</style>
<div class="success-stories-link">1</div>
<div class="success-stories-link">2</div>
<div class="success-stories-link">3</div>
I think that the problem is that you are not calling the other colors: I would try something like this: What I am doing here is that I am creating a variable $i and make it $i=0 then inside the while loop I increment $i and so I can add a number at the end of the css class and it will look like this:
class="success-stories-link<?php echo $i; ?>"
<?php
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php $i = 0;
while ($query->have_posts()) : $query->the_post(); ?>
<div class="success-stories-div">
<div class="success-stories-text">
<p style="font-size: 120%;">Success Story</p>
<?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<div class="success-stories-link<?php echo $i; ?>">Hear More >
</div>
</a>
</div>
<?php $i++; endwhile; wp_reset_query(); ?>
in the css I would add different background-color:
.success-stories .success-stories-link0 {
margin-top: 1em;
width: 465px;
height: 50px;
background-color: #F4B147;
padding: 12px 0 0 15px;
}
.success-stories .success-stories-link1 {
background-color: another-color;
}
.success-stories .success-stories-link2 {
background-color: another-color;
}
I haven't test this code. Also, I am looking at the pictures How I need to be:
Also, there might be a better solution to it...but this should save your life for now =)
I really don't know much about coding and my developer has gone dark so I really need some advice on how to fix this problem. The footer on one of my pages won't stay at the bottom and is covering up some of the content. Below is the code. How can I make the footer stay at the bottom of the page? Here is the page: http://www.halfmoonbaymeetings.com/hot-dates-hot-rates/
<?php
/*
Template Name: Hot Dates Hot Rates
*/
?>
<?php get_header(); ?>
<div class="col7 equalheight" id="content">
<?php $my_query = new WP_Query('page_id=76'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<h1 class="title"><?php the_title(); ?></h1>
<?php $subtitle = get_post_meta($post->ID, 'subtitle', TRUE); if($subtitle != '') { ?>
<p class="subtitle"><?php echo $subtitle; ?></p>
<?php } ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php $my_query = new WP_Query('showposts=1000&post_type=featured-hotels'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<?php if ( get_post_meta( get_the_ID(), '_hotdates', true ) ) { ?>
<div class="col6 featuredhotel steals hotelheight">
<?php echo get_post_meta($post->ID, "_hotdates", true); ?>
</div><!-- END .col6.featuredhotel.steals -->
<?php } ?>
<?php endwhile; ?>
</div><!-- END .col8 #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
And here is the footer code from the Stylesheet:
.footerwrap {
background: #F9F9F9;
float: left;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.footerwrap .col12 { text-align: center; }
.footerwidgets {
background: #eee;
border-top: 5px solid #e0e0e0;
float: left;
margin: 0;
padding: 20px 0 0 0;
position: relative;
width: 100%;
You need to add margin-bottom: 289px; to the .contentwrap div because the footer is 289px high so you need to add 289px bottom of the .contentwrap div to offset that.
.contentwrap
{
float: left;
margin: 0;
padding: 0;
position: relative;
width: 100%;
margin-bottom: 289px;
}
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