现场自适应菜单

Question

我需要一个固定在链接底部的菜单 https://www.openmedia.co/

我做不好。有人可以帮助实施和适应性吗

我尝试制作它，但无法在徽标和菜单项之间建立联系

HTML

<header class="header">
  <a href="/"><img class="header__logo" src="/assets/icons/logo.png"></a>
</header>

<div class="navbar">

  <a href="/" class="navbar__logo">
    <img src="/assets/icons/logo.png">
    <img class="navbar__icon" src="/assets/icons/navbar.svg" alt="navbar">
  </a>

  <div class="navbar__container">
    <a href="/" class="navbar__link navbar__link-selected">Связаться</a>
    <a href="/vacancies" class="navbar__link">Вакансии</a>
    <a href="/contacts" class="navbar__link">Контакты</a>
  </div>

</div>

SCSS

.navbar {
  z-index: 10000;
  position: fixed;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
  margin: 0 auto;
  margin-bottom: 50px;
  // mix-blend-mode: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  * {
    z-index: 2000;
  }
}

.navbar__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: rgba(68, 68, 74, 1);
  border-radius: 50px;
  padding: 10px;
}

.navbar__logo img {
  z-index: 1000;
}

.navbar__icon {
  z-index: 100 !important;
  position: absolute;
  left: 0;
  top: 0;
}

.navbar__logo img {
  max-height: 100%;
}

.navbar__container {
  background-color: rgba(68, 68, 74, 1);
  height: 60px;
  border-radius: 80px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar__link {
  font-size: 24px;
  line-height: 100%;
  background-color: transparent;
  border-radius: 40px;
  padding: 14px 24px;

  &:hover {
    background-color: #6b6b6b;
  }
}

.navbar__link-selected {
  background-color: #27272b;

  &:hover {
    background-color: #27272b;
  }
}

我设法创建了类似的东西。但结果还是不适合我，因为很难适应移动版本。

Answer 1

对现有代码进行以下更改可以解决修复链接底部菜单的问题

HTML `

CSS $导航栏高度：60px； . header { 显示：无； // 在移动设备上隐藏标题 }

    .navbar {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     height: $navbar-height;
     background-color: rgba(68, 68, 74, 1);
     display: flex;
     justify-content: space-around;
     align-items: center;
     }

      .navbar__container {
       display: flex;
       align-items: center;
       gap: 20px;
      }

     .navbar__link {
      font-size: 18px;
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 20px;
      }

      .navbar__link-selected {
       background-color: #27272b;
       }

    @media (min-width: 768px) {
    .header {
    display: block;
    padding: 20px;
     }

    .navbar {
    display: none; // Hide the navbar on desktop
    }
   }`