1
Я пытаюсь создать это меню навигации, и что-то похоже на то, что я добавляю свой логотип. правый заголовок продолжает двигаться вниз. Я пробовал разные вещи, но никто не работает. Может быть, вы можете увидеть мою ошибку.Как исправить правый заголовок
Вот мой JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
background-color: #ccc;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
.header {
background: -webkit-linear-gradient(#25292C, #1E2224);
background: -o-linear-gradient(#25292C, #1E2224);
background: -moz-linear-gradient(#25292C, #1E2224);
background: linear-gradient(#25292C, #1E2224);
height: 100px;
width: 100%;
position: relative;
z-index: 1;
overflow: hidden;
}
.header-cover {
width: 780px;
height: 100px;
margin: auto;
}
.header-left {
width: 240px;
float: left;
height: 100px;
}
.header-right {
width: 240px;
float: right;
height: 100px;
}
.bar {
width: 120px;
height: 100px;
float: left;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.logo {
height: 50px;
width: 50px;
margin: auto;
}
.logo img {
padding-top: 15px;
display: block;
margin: auto;
position: relative;
z-index: -1;
}
.top {
height: 0px;
width: 120px;
background-color: #535557;
position: relative;
z-index: 1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.text {
font-family: roboto;
font-size: 21px;
color: #fff;
text-align: center;
margin-top: 35px;
letter-spacing: 1px;
position: relative;
z-index: 10;
}
.bar:hover .top {
padding-bottom: 20px;
}
.bar:hover .text {
color: #fff;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Website NabBar Template</title>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="header">
<div class="header-cover">
<div class="header-left">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">HOME</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">SHOP</div>
</div>
</a>
</div>
<div class="logo">
<img src="http://i.imgur.com/Gghu413.png"/>
</div>
<div class="header-right">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">STAFF</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">FORUMS</div>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Вы должны включить соответствующий код и разметку здесь на SO, кроме того, вы должны размещать скрипку ссылки непосредственно, не используйте обфусцированную ссылку. –
Я добавил фрагмент. Надеюсь, что поможет – Sentinel