FreakFlag FreakFlag - 5 months ago 7
CSS Question

How to align a Wordpress navigation bar to the right of a logo?

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:website logo with navigation to the right

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

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.

Comments