当我将填充添加到菜单按钮时,我将用它来显示下拉菜单,它缩小了图像的尺寸。随着浏览器窗口的扩大,它会继续缩小,直到无法再看到它。在下面的代码中,它的大小正确,但如果我添加任何类型的填充,则会出现问题。 ul隐藏在显示菜单按钮的屏幕尺寸上,反之亦然。
.menu-button {
float: right;
margin: 8px 3% 0 0;
min-width: 30px;
display: inline-block;
}
#landing {
background: url('../img/coffee-laptop.jpg') no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100%;
}
<div id="landing">
<header class="group">
<h1 class="logo"><a href="index.html">Ben Quartermaine</a></h1>
<a class="menu-button"><img src="img/icons/menu.svg"></a>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</div>