如何将徽标右侧的Wordpress导航栏对齐？

Question

I'm trying to get my navigation bar to the right of the logo in my Wordpress theme. It's being built with Underscores. I've managed to line up the primary navigation and the logo the way I want it, basically, with this CSS:

.main-navigation {
    position: relative;
    float: right;
    top: -4em;
    width: 55%;
    display: block;
    clear: both;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    float: right;
}

and here's a picture of how I want it to look:

I understand that negative margins (assuming top: -4em; is considered with negative margins) aren't elegant or the best way to handle these sorts of things. Plus, I generally find these kinds of workarounds usually come back to bite me later on.

I'm new to playing around with JSFiddle, so I hope I've done this correctly! Here's my code, now condensed!: http://jsfiddle.net/DMDesigns/d39ej96r/11/

What's the best way to make this happen? I've been searching, seen a lot of people ask this question, but many of the answers have been too specific to their website to help me.

Answer 1

This took me the better part of the day to figure out, yesterday, but disappointed with the lack of responses, here's what I figured out. I'm posting it here for anyone else having a similar problem.

First, I took the logo (named .header-image) and added:

float: left;
position: relative;

Then I took the navigation I wanted to the left of (named .main-navigation) and removed my workaround, which was

float: right; 
top: -4em; 
width: 55%;  

and changed clear:both; to clear:none;

I added a little personal CSS to my .main-navigation to make it match the logo which was

 height: 112px;
 background: #69d7f9;
 z-index: -1;
 padding: 28px 0;

and I removed any floats from .main navigation ul.

Answer 2

It's better to create a main div and insert both logo and navigation section in the same div with float:left; for both of them. Let me know if you get this or I'll let you know by an example.

Answer 3

Using the Underscores starter theme for WordPress, the navigation bar can be floated to the right of the logo (or site title) using the following method:

Add the following CSS to your style-sheet:

.site-branding{
    float: left;
    display: inline-block;
}
.site-description{
    display: none;     
}
#site-navigation{
    float: right;
    clear: none;
    width: auto;
}

These instructions are based on the Underscores theme as is before customisation.