1 reply [Last post]
jennw
jennw's picture
Offline
newbie
Last seen: 5 years 40 weeks ago
Timezone: GMT-6
Joined: 2014-11-03
Posts: 1
Points: 2

I am having a problem getting my logo centered in the navigation bar inside the header. Please help. Here's the fiddle http://jsfiddle.net/jennwysedesign/16dwwkbr/

Here is what the image should look like:
http://imagizer.imageshack.us/a/img661/7627/5cbQ8j.jpg

Thanks so much!!!

<link href="style.css" rel="stylesheet" type="text/css">
<section>
 <header>
  <nav>
   <ul>
    <li>ABOUT US </li>
    <li>ELECTED OFFICIALS </li>
    <li>CANDIDATES</li>
    <li>NEWS</li>
    <li>RESOURCES</li>
    <li>REGISTER NOW</li>
    <li>CONTACT </li>
   </ul>
  </nav>
  <div class="logo"><img src="../../../Freelance/Americommerce/JeffersonCountySite/images/logo.png" alt="a" width="164" height="163"></div>
 </header>
</section>

CSS:

* {margin: 0; padding: 0;}
 
body {
background: #f5f5f5;
font-family: arial;
}
 
section {
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
}
 
header {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}
 
nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}
 
nav li:nth-child(3) {
padding-right: 80px;
}
 
nav li:nth-child(4) {
padding-left: 80px;
}
 
.logo {
background: url(logo.png) 50% 0 no-repeat;
background-size: 32px 59px;
width: 32px;
height: 59px;
position: absolute;
top: 20px;
left: 460px;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi jennw, You may have this

Hi jennw,
You may have this fixed already but one way to try is:
background-position: calc(50% - 16px) 0;