CODEWITHSUNDEEP
htmlcss
Avión
Avión

Reputation: 8386

Adding a left logo to my navigation bar

I'm trying to set my company logo on my header navigation bar with no luck. I tried by adding before the nav itself but it's not centering the content. The image is shown first and the messy menu after that.

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

You can try it right here, by adding <img src="http://i.imgur.com/jNwTPBi.png">: http://codepen.io/anon/pen/XKKPGO

How can I put the logo on the left so I can get something like the following solution? I guess I've to make some changes on the .css but I dont know what do I have to edit.

Thanks in advance. enter image description here

Upvotes: 0

Views: 1265

Answers (2)

river rhun
river rhun

Reputation: 80

i think it's super easy, so i think it might answer ur question

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

<nav></nav>
</header>

put a wrapper div on your image and put an absolute position with it. width whatever div width u want and height same as ur header. have you ever tried it before?

Upvotes: 0

Bri
Bri

Reputation: 593

Your CSS is over whelming. All you would need to do is give/create the wrapper a position of relative and the logo the position absolute.

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

Upvotes: 2

Related Questions