我正在尝试弄清楚如何设置带有居中徽标的响应式导航栏

问题描述 投票：0回答：2

我是新来的，但我无法仅使用 html、css 和 js 找到这个问题的答案。这是我第一次离开 WordPress。我已经被困了三天了，我错过了一些东西。我没有人可以伸出援手来让另一双眼睛关注它，所以我想我应该在这里碰碰运气。桌面版本可以使用，但移动响应版本不适合我。我曾讨论过只为移动设备创建一个单独的导航栏，但我认为可能有一种方法可以在不这样做的情况下做到这一点。

标题在悬停之前是透明的（明白了） 它是粘性的，并在滚动时转变为另一种颜色（明白了） 不过，响应式部分让我很恼火，我失去了居中的徽标，并且无法获得打开下拉菜单的按钮。如有任何帮助，我们将不胜感激。

header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-weight: 600;
  height: 78px;
  width: 100%;
  background-color: transparent;
  position: sticky;
  transition: background-color 0.3s;
  z-index: 10;
  top: 0;
}


/* BLUE HEADER BACKGROUND ON HOVER */

header:hover {
  background-color: #7B97A6;
}


/* START HEADER BACKGROUND TRANSITION ON SCROLL */

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #7B97A6 0%, #2C4149 50%);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.header-scrolled::before {
  opacity: 1;
}

.menu {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
  font-size: 1.8rem;
  width: 100%;
  height: 100%;
  column-gap: 7vw;
}

.menu a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.1rem;
}

.menu a:hover {
  color: #cf0a2c;
  transition-duration: 0.6s;
}

.btn-toggle,
.menu-container .links {
  display: none;
}

.nav-logo {
  display: block;
  width: 144px;
  margin: 0 auto;
  float: none;
}

.logo {
  width: 100%;
  height: auto;
}

.icons {
  height: 20px;
  margin-right: 2px;
  align-items: center;
  vertical-align: middle;
}

.menu ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  text-transform: uppercase;
  column-gap: 6vw;
}
<header>
  <nav class="menu-container">
    <div class="menu" id="navbar">
      <ul class="left-side nav-links">
        <li>
          <img src="icons\products-icon.svg" alt="product icon" class="icons" />
          <a href="#" target="_blank">Products</a>
        </li>
        <li>
          <img src="icons\shopping-cart.svg" alt="shopping cart icon" class="icons" />
          <a href="#" target="_blank">Order-now</a>
        </li>
      </ul>
      <div class="nav-logo" id="nav-logo">
        <img src="images\logo.png" width="144" alt="Logo" class="logo" />
      </div>
      <ul class="right-side nav-links">
        <li>
          <img src="icons\service-locator.svg" alt="search icon" class="icons" />
          <a href="#" target="_blank">Service Locator</a>
        </li>
        <li>
          <img src="icons\contact-icon.svg" alt="phone icon" class="icons" />
          <a href="#" target="_blank">Contact</a>
        </li>
      </ul>
    </div>
    <button class="btn-toggle">
            <img src="icons\mobile-toggle.svg">
        </button>
  </nav>
</header>

这是桌面版本的图像居中徽标桌面菜单。

这是我想要的移动响应式外观。响应式移动下拉导航

html css header navbar responsive
2个回答
0
投票

嗨我的朋友。您肯定创建了太多不必要的包装器，并出于某种原因复制了菜单，尽管这没有任何意义。事实证明，重构代码比编写可工作的新示例更困难。我建议使用网格系统作为导航栏。

document.querySelector('.btn').addEventListener('click', () => {
      document.querySelector('.nav').classList.toggle('active')
    })
.header {
  position: sticky;
  background: red;
  transition: background 0.5s ease;
}

.nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header:hover {
  background: blue;
}

.btn {
  display: none;
}

.content {
  min-height: 1200px;
  background: green;
}

@media screen and (max-width: 768px) {
  .header {
    display: flex;
    justify-content: flex-end;
  }

  .nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.5s ease;
  }

  .btn {
    display: block;
  }

  .active {
    opacity: 1;
    transform: translateY(100%);
  }
}
      <div class="header">
        <nav class="nav">
          <li>item1</li>
          <li>item2</li>
          <li>logo</li>
          <li>item4</li>
          <li>item5</li>
        </nav>
        <button class="btn">button</button>
      </div>
      <div class="content"></div>

我还鼓励您仅将我的代码用作粗略模板。您需要将元素放在 const 上，为事件侦听器创建单独的函数并选择正确的媒体方块。

0
投票

您可能需要使用媒体查询来实现响应式操作。 这是一个小片段，在 600px 以下会有不同的表现

function toggle() {
  const navList = document.getElementById('nav-list')
  if (navList.classList.contains('expanded')) {
    navList.classList.remove('expanded')
  } else {
    navList.classList.add('expanded')
  }
}
body {
  padding: 0;
  margin: 0;
  background: #7B97A6;
}

header {
  background: #1D617A;
  position: relative;
}

#nav-list {
  height: 3rem;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#nav-list li {
  list-style-type: none;
  cursor: pointer;
}

.expander {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  height: 2rem;
  width: 2rem;
  display: none;
}

@media (max-width: 600px) {
  #nav-list {
    flex-direction: column;
  }
  #nav-list.expanded {
    height: fit-content;
  }
  header {
    background: #7B97A6;
    cursor: pointer;
  }
  header:hover {
    background: #1D617A;
  }
  
  .nav-link {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    display: none;
    width: 100%;
  }
  .nav-link:hover {
    background: #345F77;
  }
  
  .expanded .nav-link {
    display: block;
  }
  .expanded .nav-logo {
    background: #7B97A6;
    height: 3rem;
    line-height: 3rem;
    display: block;
  }
  .nav-logo {
    order: -1;
    width: 100%;
    text-align: center;
  }
  .expander {
    display: block;
  }
}
<body>
  <header onclick="toggle()">
    <nav>
      <ul id='nav-list'>
        <li class='nav-link'>Products</li>
        <li class='nav-link'>Order Now</li>
        <li class='nav-logo'>LOGO</li>    
        <li class='nav-link'>Service Locator</li>
        <li class='nav-link'>Contact</li>
      </ul>
    </nav>
    <button class='expander'>
      |||
    </button>
  </header>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.