Logo won't show up in center of navigation

Question

I'm trying to get my logo to show up in the center of my navigation. I've racked my brain and I can't figure out why it won't.

html

  <div class ="menu-bar">

    <ul id='menu'> 

 <li><a id="here" href='http://localhost:8888/#landingpage'><span style = "color:#989898">HOME</span></a></li>     
<li><a id="shop" href='http://localhost:8888/68-2/'><span style = "color:#989898">SHOP</span></a></li>
<li><a id="checkout" href='http://localhost:8888/checkout/'><span style = "color:#989898">CHECKOUT</span></a></li>

<li><a class="logo" href= 'http://localhost:8888/#landingpage'></a></li>

<li><a id="us" href='http://localhost:8888/about-2'><span style = "color:#989898">ABOUT</span></a></li>
<li><a id="contact" href='http://localhost:8888/contact-2/'><span style = "color:#989898">CONTACT</span></a></li>
<li><a id="press" href='http://localhost:8888/press/'><span style = "color:#989898">PRESS</span></a></li>
</ul>

 </div>
</div>
</div>

CSS

body {
    font: 18px "Avenir Light", 'Open Sans', sans-serif; 
    color: #989898;
    background-color: #F3F4F4;
    font-weight: 100;
    width: 100%;
    overflow-x: hidden;

}

.container {
margin-right:auto;
margin-left:auto;
padding-left:15px;
padding-right:15px

}

p{ 

font:18px "Avenir Light";
color: #989898;



} 



section {
    padding: 100px 0;
}


section.success {
    color: #fff;
    background: #8D4198;
    margin-right: -15px;
    margin-left: -15px;
}

section.white{
    color: #989898;
    background: #F3F4F4;
    margin-right: -15px;
    margin-left: -15px;

}

section.orange{

    color: #fff;
    background: #EF5336;
    margin-right: -15px;
    margin-left: -15px;

}

/* Headings */ /* Headings */ /* Headings */
/* Headings */ /* Headings */ /* Headings */

h5 {
    font-size: 32px;
    color: #8D4198;
    font-weight: lighter;
    text-align:center;


}

h4 {
    font-size: 32px;
    color: #989898;
    font-weight: lighter;
    text-align:center;
    /*border-bottom: solid 1.5px #EE5435; */
    margin-top: -20px;

}



/* Header */ /* Header */ /* Header */ /* Header */
/* Header */ /* Header */ /* Header */ /* Header */


.header {
    background-color:#F3F4F4;
    height:150px;
    margin: -10px;


}

.header .menu-bar{
    padding-top: 80px;


}


.header .menu-bar ul {
    margin:0 auto;
    width: 950px;;
    list-style: none;

}

.header .menu-bar li {
  float: left;
  border:medium #0F0;
  padding-left: 32px;

}


.header ul li a.logo {
    background: url("http://i.imgur.com/B5AV1zb.png");
    background-repeat:no-repeat;
    width: 60px;    
    height: 90px;
    margin: 0 auto;
    margin-top:-33px;
    padding-bottom: 10px;
    border-bottom: none;
}

.header .menu-bar a:hover  {
 color: #8D4198;
}

.header .menu-bar aorange:hover  {
 color: #8D4198;
}

.header .menu-bar ayellow:hover  {
 color: #8D4198;
}


#here,
#us {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #93D7E7;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #93D7E7;
  padding-right: 50px;
  padding-left: 0px;

}


#shop,
#contact {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #EE5435;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #EE5435;
  padding-right: 50px;
  padding-left: 0px;

}


#checkout,
#press {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #D3DC3F;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #D3DC3F;
  padding-right: 50px;
  padding-left: 0px;
}

Here's my codepen: http://codepen.io/anon/pen/KpwPoO

I need fresh eyes! Any suggestions? Thank you!

@marcelo2605 - it's a background image on an anchor that has a css height and width (which isn't being applied for some reason) - you can see the logo if you add some text to the empty link — wunth, Apr 24 '15 at 20:23

score 0 · Answer 1 · answered Apr 24 '15 at 20:26

you need to switch layout context for <a> (inline by defaut )

body {
  font: 18px "Avenir Light", 'Open Sans', sans-serif;
  color: #989898;
  background-color: #F3F4F4;
  font-weight: 100;
  width: 100%;
  overflow-x: hidden;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px
}

p {
  font: 18px "Avenir Light";
  color: #989898;
}

section {
  padding: 100px 0;
}

section.success {
  color: #fff;
  background: #8D4198;
  margin-right: -15px;
  margin-left: -15px;
}

section.white {
  color: #989898;
  background: #F3F4F4;
  margin-right: -15px;
  margin-left: -15px;
}

section.orange {
  color: #fff;
  background: #EF5336;
  margin-right: -15px;
  margin-left: -15px;
}
/* Headings */
/* Headings */
/* Headings */
/* Headings */
/* Headings */
/* Headings */

h5 {
  font-size: 32px;
  color: #8D4198;
  font-weight: lighter;
  text-align: center;
}

h4 {
  font-size: 32px;
  color: #989898;
  font-weight: lighter;
  text-align: center;
  /*border-bottom: solid 1.5px #EE5435; */
  
  margin-top: -20px;
}
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */

.header {
  background-color: #F3F4F4;
  height: 150px;
  margin: -10px;
}

.header .menu-bar {
  padding-top: 80px;
}

.header .menu-bar ul {
  margin: 0 auto;
  width: 950px;
  ;
  list-style: none;
}

.header .menu-bar li {
  float: left;
  border: medium #0F0;
  padding-left: 32px;
}

.header ul li a.logo {
  background: url("http://i.imgur.com/B5AV1zb.png");
  background-repeat: no-repeat;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  margin-top: -33px;
  padding-bottom: 10px;
  border-bottom: none;
  display: block
}

.header .menu-bar a:hover {
  color: #8D4198;
}

.header .menu-bar aorange:hover {
  color: #8D4198;
}

.header .menu-bar ayellow:hover {
  color: #8D4198;
}

#here,
#us {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #93D7E7;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #93D7E7;
  padding-right: 50px;
  padding-left: 0px;
}

#shop,
#contact {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #EE5435;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #EE5435;
  padding-right: 50px;
  padding-left: 0px;
}

#checkout,
#press {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #D3DC3F;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #D3DC3F;
  padding-right: 50px;
  padding-left: 0px;
}

<div class= "header">

  <div class ="menu-bar">
  
    <ul id='menu'> 
     
 <li><a id="here" href='http://localhost:8888/#landingpage'><span style = "color:#989898">HOME</span></a></li>     
<li><a id="shop" href='http://localhost:8888/68-2/'><span style = "color:#989898">SHOP</span></a></li>
<li><a id="checkout" href='http://localhost:8888/checkout/'><span style = "color:#989898">CHECKOUT</span></a></li>

<li><a class="logo" href= 'http://localhost:8888/#landingpage'></a></li>

<li><a id="us" href='http://localhost:8888/about-2'><span style = "color:#989898">ABOUT</span></a></li>
<li><a id="contact" href='http://localhost:8888/contact-2/'><span style = "color:#989898">CONTACT</span></a></li>
<li><a id="press" href='http://localhost:8888/press/'><span style = "color:#989898">PRESS</span></a></li>
</ul>

 </div>
</div>
</div>

display: anything but inline or float will work

your pen forked http://codepen.io/gc-nomade/pen/jPENQN (same as snippet above)

score 0 · Answer 2 · answered Apr 24 '15 at 20:26

0

Your listitems are resolving to display: inline, and inline items cannot have a height or width. Manually setting it to display: inline-block will allow it to receive your height and width properties.

.header ul li a.logo {
    background: url("http://i.imgur.com/B5AV1zb.png");
    background-repeat:no-repeat;
    width: 60px;    
    height: 90px;
    margin: 0 auto;
    margin-top:-33px;
    padding-bottom: 10px;
    border-bottom: none;
    display: inline-block;
}

Forked codepen: http://codepen.io/anon/pen/MwYgPa

answered Apr 24 '15 at 20:26

Karl

1,220
9
16

Thank you so much! Can you explain to me briefly the difference between inline, block, and inline-block? Thank you! – breadbox Apr 24 '15 at 20:49
inline means the display will not disrupt the flow of the content at all. block will try and take up all the space of its parent container after starting on a new line. inline-block is like a hybrid of the two, having a height and width but not disrupting flow with a new line – Karl Apr 24 '15 at 20:59
http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block – Karl Apr 24 '15 at 21:00

score 0 · Answer 3 · answered Apr 24 '15 at 20:28

A couple of things you need to do.

For starters, you have your logo as an "a" tag with a background image, but an "a" tag is an inline element, which means that your declarations for height and width will not apply.

In order to get your height and width to affect your "a.logo", you need to set the display to "block" or "inline-block"

.header ul li a.logo {
    background: url("http://i.imgur.com/B5AV1zb.png");
    background-repeat: no-repeat;
    width: 95px;                 /*  More width to accommodate image  */
    height: 90px;
    margin: 0 auto;
    margin-top: -33px;
    padding-bottom: 10px;
    border-bottom: none;
    display: inline-block;       /*  set to inline-block  */
}

You also need a little more width, and you need to make your "ul" for the menu wider.

Thank you so much! This worked. Appreciate the help. – breadbox Apr 24 '15 at 20:48 — breadbox, Apr 24 '15 at 20:48

score 0 · Answer 4 · answered Apr 24 '15 at 20:37

0

Easily You can link the img inside html <a> tag instead using in css bg

<li><a class="logo" href= '#'><img src="http://i.imgur.com/B5AV1zb.png" alt=""></a></li>

answered Apr 24 '15 at 20:37

Sadman Hasan

140
7
18

Logo won't show up in center of navigation

4 Answers4