0
Я пытаюсь открыть свой логотип в центре моей навигации. Я разбил свой мозг, и я не могу понять, почему это не так.Логотип не отображается в центре навигации
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;
}
Вот мой codepen: http://codepen.io/anon/pen/KpwPoO
мне нужны свежие глаза! Какие-либо предложения? Спасибо!
@ marcelo2605 - это фоновое изображение на якорь, который имеет высоту CSS и ширину (которая не применяется по какой-то причине) - вы можете увидеть логотип, если вы добавите текст в пустую ссылку – wunth