html - 为什么调整导航栏大小时我的图像消失
问题描述
我有一个响应式导航栏并有一个下拉菜单。当我调整浏览器的大小以便到达断点并且导航转到其移动视图时,下面的英雄图像将消失并且部分看到标题标签,我不确定并且看不到是什么导致了这种情况。任何帮助将不胜感激!
HTML
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="#!">image</a>
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a href="#!">header 10</a>
</li>
<li>
<a href="#!">header 9</a>
<ul class="nav-dropdown">
<li>
<a href="#!">header 8</a>
</li>
<li>
<a href="#!">header 7</a>
</li>
<li>
<a href="#!">header 6</a>
</li>
<li>
<a href="#!">header 5</a>
</li>
<li>
<a href="#!">header 4</a>
</li>
</ul>
</li>
<li>
<a href="#!">header3</a>
</li>
<li>
<a href="#!">header 2</a>
</li>
<li>
<a href="#!">Header 1</a>
</li>
</ul>
</nav>
</div>
</section>
<div class="hero-image">
<div class="hero-text">
<h1>Bring Your Garden And Driveway to life </h1>
<h2>Scroll Down To Learn More</h2>
</div>
</div>
CSS
@charset "UTF-8";
.navigation {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
color: grey;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
@media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
@media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
body, html {
height: 100%;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
body {
height: 1000px;
}
.hero-image {
background-image: url(https://stmed.net/sites/default/files/leaves-wallpapers-25246-1391025.jpg);
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/*==========WELCOME-TEXT==========*/
.hero-text {
text-align: center;
color: white;
font-family: 'Slabo 27px', serif;
font-size: 26px;
}
.hero-text h2 {
font-style: italic;
font-size: 22px;
}
@media only screen and (max-width: 450px) {
.hero-text h1 {
font-size: 20px;
font-family: 'Slabo 20px', serif;
}
.hero-text h2 {
font-size: 18px;
}
}
解决方案
您需要在.hero-image
类上指定宽度。在这种情况下width: '100%';
应该就足够了,尽管它可以是你想要的任何东西。
你会注意到,一旦你这样做了,导航和主图之间就会有一个15px
间隙,这是从nav
元素的底部填充开始的。如果这是一种风格/设计选择,那么无需担心删除或调整它。只是想提个醒。
推荐阅读
- python - 如何子弹限制火力以及如何
- python - Python 拍卖行计算获胜者
- powershell - 如何在 Windows 上使用带有远程 pc 的 PowerShell 远程调用应用程序(.exe 文件)?
- android - Android 在深色模式下更改工具栏背景颜色
- c++ - 功能完美,但返回后改变值
- node.js - 如何解决我的 heroku 应用程序上的“不安全”警告?
- c# - 用于替换值的 REGEX 帮助
- c# - 如何调用返回列表的存储过程
使用 .net 核心实体框架 - embedded - USART中idle和break字符的目的是什么?
- javascript - 在 Apollo Express GraphQL 中出现错误:错误:模式必须包含唯一命名的类型,但包含多个名为“DateTime”的类型