Question

我在英雄图像和下拉菜单方面遇到问题。我不是开发人员，只是试图建立一个网站。

问题1：“ overflow：hidden”属性隐藏了响应式下拉菜单。

问题2：如果我删除了英雄形象，则社交链接不会出现在响应式下拉菜单上。我认为我的HTML结构有问题，但是我不确定。

问题3：如果我从英雄图片和导航栏中删除了“ overflow：hidden”属性，则该图片无法正确调整尺寸以适合屏幕，它将远远超出屏幕。

如果有人有解决方案，我将不胜感激。

switchMap

const navbarToggler = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");

navbarToggler.addEventListener("click", navbarTogglerClick);

function navbarTogglerClick() {
  navbarToggler.classList.toggle("open-navbar-toggler");
  navbarMenu.classList.toggle("open");
}

navbarLinks.forEach(elem => elem.addEventListener("click", navbarLinkClick));

function navbarLinkClick() {
  if(navbarMenu.classList.contains("open")) {
    navbarToggler.click();
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  font-family: 'Calistoga', cursive;
}
.navbar{
  height: 100px;
  width: 100%;
  background-color: black;
  line-height: 100px;
  position: relative;
  padding: 0px;
  overflow: hidden;
}
.navbar a{
  text-decoration: none;
  color: white;
}
/* Hamburger Menu Start */
.navbar-toggler{
  display: none;
}
/* Hamburger Menu End */
/* Logo Start */
.navbar-brand{
  float: left;
  line-height: inherit;
}
/* Logo End */
/* Menu Links Start */
.navbar .navbar-menu{
  float: left;
  list-style: none;
  height: inherit;
  line-height: inherit;
  padding: 0 50px;
  font-size: 18px;
}
.navbar .navbar-menu a:hover{
  background-color: rgba(255,255,255,0.15);
}
.navbar .navbar-menu ul li{
  display: inline-block;
  background-color: transparent;
}
.navbar .navbar-menu ul li a{
  display: block;
  text-align: center;
  min-width: 120px;
  padding: 0 30px;
}
/* Menu Links End */
/* Social Links Start */
.navbar .navbar-social{
  float: right;
  list-style: none;
  height: inherit;
  line-height: inherit;
  padding: 0 50px;
  font-size: 25px;
}
.navbar .navbar-social a:hover{
  background-color: rgba(255,255,255,0.15);
}
.navbar .navbar-social ul li{
  display: inline-block;
  background-color: transparent;
}
.navbar .navbar-social ul li a{
  display: block;
  text-align: center;
  min-width: 120px;
  padding: 0 30px;
}
/* Social Links End */
/* Hero Start */
.hero{
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  justify-content: center;
  display: flex;
} 
/* Hero End */
/* Footer Start */
.footer {
  height: 100px;
  background-color: black;
  height: 100px;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 100px;
}
/* Newsletter Start */
.container{
  top: 30%;
  line-height: inherit;
  text-align: center;
  color: white;
  position: relative;
}
.container p {
  max-width: 600px;
  margin: 40px auto;
  font-size: 15px;
  font-weight: 300;
}
.email-box{
  height: 40px;
  justify-content: center;
  display: flex; /*its better to use inline-flex*/  
}
.email-box i{
  background: black;
  width: 40px;
  line-height: 40px;
}
.tbox,.btn{
  outline: none;
  border: none;
}
.tbox{
  width: 0px;
  transition: 0.6s;
}
.btn:hover{
  background-color: rgba(255,255,255,0.15);
}
.email-box:hover > .tbox,.tbox:focus{
  width: 260px;
  padding: 0 10px;
}
.btn{
  background: black;
  color: white;
  padding: 0 10px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Calistoga', cursive;
}
/* Newsletter End */
/* Footer End */
@media (max-width: 991px) {
  .navbar ul {
    padding: 0 10px;
  }
  .navbar ul li a {
    min-width: 100px;
    padding: 0 20px;
  }
  /*This is Probably Unescessary
  .navbar .navbar-social ul {
    padding: 0 10px;
  }
  .navbar .navbar-social ul li a {
    min-width: 100px;
    padding: 0 20px;
  }
  /*This is Probably Unescessary*/
  .footer ul{
    padding: 0 10px;
  }
  .footer ul li a{
    min-width: 100px;
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .navbar a.navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: relative;
  }
  .navbar {
    padding: 0;
  }
  .navbar ul {
    width: 100%;
    padding: 0;
    background-color:  rgba(0,0,0,0.9);
    /* height: auto; */
    height: 100vh;
    max-height: 0;
    overflow: hidden;
    transition: all ease-in-out 0.3s;
  }
  .navbar ul.open {
    max-height: 100vh;
    /*this next line prevents the navbar overlap on mobile 
    padding-block-start: 100px;*/
  }
  .navbar ul li {
    width: 100%;
    /* border-bottom: 1px solid rgba(255,255,255,0.3); */
  }
  .navbar ul li a {
    padding: 0;
  } 
  .email-box .tbox,.tbox:focus{
    width: 260px;
    padding: 0 10px;
  }
  .navbar .navbar-toggler {
    display: block;
    position: absolute;
    height: 40px;
    top: 20px;
    left: 20px;
    background-color: transparent;
    color: #fff;
    border: none; 
    outline: none;
    padding: 0 5px;
    cursor: pointer;
  }
  .navbar .navbar-toggler span,
  .navbar .navbar-toggler span::before,
  .navbar .navbar-toggler span::after {
    display: block;
    content: '';
    background-color: #fff;
    height: 3px;
    width: 28px;
    border-radius: 4px;
    transition: all ease-in-out 0.3s;
  }
  .navbar .navbar-toggler span::before {
    transform: translateY(-8px);
  }
  .navbar .navbar-toggler span::after {
    transform: translateY(5px);
  }
  .navbar .navbar-toggler.open-navbar-toggler span {
    background-color: transparent;
  }
  .navbar .navbar-toggler.open-navbar-toggler span::before {
    transform: translateY(0px) rotate(45deg);
  }
  .navbar .navbar-toggler.open-navbar-toggler span::after {
    transform: translateY(-3px) rotate(-45deg);
  }
}

隐藏的溢出隐藏了我的汉堡下拉菜单，但是没有它，英雄图像大小错误

0 个答案: