【发布时间】:2019-04-23 09:44:48
【问题描述】:
我想构建一个在向下滚动时改变其大小的导航栏。问题是我不知道如何使我的徽标图像具有响应性。我的意思是当标题在顶部是全宽和全高时,当我缩小导航以缩小时。
在这里,我只有一个来自代码笔的简单代码,可以向您展示我想要得到的东西
nav {
background: #555;
height: 80px;
}
.nav-content {
display: flex;
}
.logo {
height: auto;
width: 100%;
}
ul {
display: flex;
list-style: none;
}
ul li {
padding: 1rem 4rem;
}
<nav>
<div class="nav-content">
<div>
<img class="logo" src="http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg" alt="">
</div>
<ul>
<li>Number1</li>
<li>Number2</li>
<li>Number3</li>
<li>Number4</li>
<li>Number5</li>
</ul>
</div>
</nav>
【问题讨论】:
-
您错过了在示例中添加徽标
-
无论如何你必须添加一些 JS,以了解页面何时滚动,并从那里修改你的 css