在我的媒体查询中定位我从display: none
更改为display: inline-block
的移动菜单图片时,我感到很遗憾。我正在尝试将图片带到position:absolute
,并位于页面的右上角,其中包含top:30px
和right:30px
。由于某种原因,图像出现在左图(公司徽标)下面。
有人看到我做错了吗?
Click here to see a jsfiddle...adjust the screen size to under 640px
<div id="header">
<div id="nav-inner">
<div id="header-img">
<a href="index"><img src="../images/psi.png"></a>
</div><div id="nav-container">
<a class="ssm-toggle-nav" href="#" title="Open / close"><img src="images/menu-button.png" alt="Menu" id="menu-button"></a>
<nav id="nav-list">
<ul>
<li class="nav-link"><a href="index">Home</a></li>
<li class="nav-link"><a href="#">Series</a></li>
<li class="nav-link"><a href="#">Why SI</a></li>
<li class="nav-link"><a href="#">About Us</a></li>
<li class="nav-link"><a href="#">FAQ's</a></li>
<li class="nav-link"><a href="testimonials">Testimonials</a></li>
<li class="nav-link"><a href="contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
#header {
width: 100%;
height: 120px;
background: #FFF;
border-bottom: 2px solid #CDCDCD;
position: fixed;
z-index: 111;
}
#nav-inner {
width: 80%;
margin: 0 auto;
display: block;
position: relative;
}
#header-img {
width: 25%;
display: inline-block;
}
#header-img img {
height: 120px;
width: auto;
}
#menu-button {
display: none;
width: 30px;
height: 30px;
postition: absolute;
top: 50px;
right: 50px;
cursor: pointer;
}
#nav-container {
width: 75%;
display: inline-block;
position: relative;
}
#nav-list {
position: absolute;
top: 50%;
height: 120px;
margin-top: -60px;
text-align: right;
width: 100%;
}
.nav-link {
display: inline-block;
padding: 0 10px;
}
.nav-link a {
color: #009ED2;
font-size: 1.2rem;
font-family: 'Muli', sans-serif;
text-decoration: none;
position: relative;
}
.nav-link-active a {
padding-bottom: 10px;
}
.nav-link-active a:after {
content: "";
width: 80%;
height: 3px;
background: #0f5233;
bottom: 0;
position: absolute;
left: 10%;
}
/*----------------------------------------------MEDIA QUERY 640--------------------------------------------*/
@media screen and (max-width:640px) {
#header {
width: 100%;
height: 120px;
background: #FFF;
border-left: 2px solid #CDCDCD;
position: fixed;
z-index: 111;
}
#nav-inner {
width: 90%;
}
#header-img {
width: 40%;
}
#header-img img {
height: 100px;
}
#menu-button {
display: inline-block;
}
#nav-container {
width: 59%;
display: inline-block;
}
#nav-list {
position: fixed;
height: 100vh;
width: 50%;
background: #009ED2;
top: 0;
bottom: 0;
right: 0;
margin-top: 0;
z-index: 2;
overflow-y: auto;
overflow-x: visible;
transform: translate(100%,0);
}
.nav-link {
display: block;
padding: 20px 0;
width: 100%;
}
.nav-link a {
font-size: 1.2rem;
color: #FFF;
margin-right: 15px;
}
}
答案 0 :(得分:2)
您拼错postition
#nav-container
。 vertical-align: top
需要top
在容器顶部对齐,并将right
的{{1}}和#menu-button
值更改为0
,这样才会在顶部/右侧。
答案 1 :(得分:1)
在#menu-button
内,您有postition: absolute;
而不是position:absolute
。从position: relative
#nav-container
答案 2 :(得分:0)
对于一些破碎的结构和丢失的图像,有点难以辨别,但是......我没有看到它在徽标下移动。它坚持向右(尽管离右边太远)。
我可以告诉您一件事:您已经#menu-button 拼错&#34;位置&#34; 错误。你写了#34; postition&#34;。但是,你可能不应该将它应用到图腾柱(图像本身)之上。试试这个:
1。 改变:
#nav-menu {
width: auto;
display: inline-block;
position: absolute;
right: 30px;
top:30px;
}