ナビゲーションバーに左のロゴを追加する

Question

自分の会社のロゴを私のヘッダーのナビゲーションバーに設定しようとしています。私はnav自体の前に追加してみましたが、コンテンツをセンタリングしていません。画像は最初に表示され、その後には乱雑なメニューが表示されます。

<header> 
    <img src="http://i.imgur.com/jNwTPBi.png"> 
    <nav id="nav" class="ry"> 
     <ul id="main-menu"> 
     <li> 
      <a href="#"></i>Home</a> 
     </li> 
     <li> 
      <a href="#"></i>About</a> 
     </li> 
     <li> 
      <a href="#"></i>Our work </a> 
     </li> 
     <li> 
      <a href="#"></i>Work</a> 
     </li> 
     <li> 
      <a href="#"></i>Contact</a> 
     </li> 
     </ul> 
    </nav> 
    </header> 

あなたは<img src="http://i.imgur.com/jNwTPBi.png">を追加することで、右ここでそれを試すことができます。http://codepen.io/anon/pen/XKKPGO

私はので、私は、次の解決策のようなものを得ることができます左のロゴを置くことができる方法は？私は.cssのいくつかの変更を加えなければならないと思いますが、私は何を編集しなければならないのか分かりません。

ありがとうございます。

Answer 1

あなたのCSSは息を止めています。あなたがする必要があるのは、ラッパーに相対的な位置とロゴの絶対的な位置を与えたり作成したりすることだけです。

<header> 
    <div class="wrapper"> .. 
    <img src="http://i.imgur.com/jNwTPBi.png" class="logo"> .. 

header .wrapper { 
width: 1100px; 
margin: 0 auto; 
position: relative; 
} 

header .wrapper .logo { 
position: absolute; 
left: 0; 
} 

Answer 2

私はそれは超簡単だと思うので、私はそれがウル質問

<header> 
<div class="with_class"> 
    <img src=""> 
</div> 

<nav></nav> 
</header> 

に答えるかもしれないと思うが、あなたのイメージにラッパーのdivを入れて、それを絶対位置を置きます。 幅はどんなdiv幅でも同じで、高さはurヘッダーと同じです。あなたはこれまでにそれを試したことがありますか？