Делаем мой navbar отзывчивым

Question

Я только что узнал об адаптивном дизайне и адаптации страницы к меньшим экранам для обеспечения доступности, однако у меня возникли проблемы с поиском способа адаптировать навигационную панель (с отображением трех полос вместо всей панели навигации.

Это мой пользовательский navbar:

:root{ --main_color: #004771; --main_color_shade: #072060; --footer_color: #383838;}

.navbar_maincontainer{width:100%; height:50px; background-color:var(--main_color); display:flex; align-items:center; padding:0px 100px; font-size:17px;}

.navbar_link_wrapper{width:auto; height:100%; position:relative; }

.navbar_link{color:white; font-size:17px; width:100%; height:100%; display:flex; justify-content:center; align-items:center; padding:0px 30px;}

.navbar_link_wrapper:hover{background-color:var(--main_color_shade);}

.navbar_sublinks_container{position:absolute; box-shadow:4px 4px 4px rgba(0,0,0,0.2); width:300px; height:auto; left:0px; top:-700px; transition:all 600ms ease; background-color:#383838; z-index:9999999999; display:none; flex-direction:column;}

.navbar_sublink{padding:0px 15px; height:50px; display:flex; align-items:center; transition:all 600ms ease; color:rgba(255,255,255,0.8); font-size:14px; font-weight:400;}

.navbar_sublinks_line{width:100%; border-bottom:1px solid rgba(255,255,255,0.1); height:1px; margin:0 auto;}

.navbar_sublinks_title{padding:10px 0px; width:100%; color:white; font-size:13px;}

.active{background-color:var(--main_color_shade);}

.active_sub{background-color:rgba(0,0,0,0.3);}

.navbar_sublink:hover{background-color:rgba(0,0,0,0.3);}

.navbar_link_wrapper:hover .navbar_sublinks_container{display:flex;  top:100%;}

<div class="navbar_maincontainer" style="">
    <div class="navbar_link_wrapper">
        <a class="navbar_link" href="/" style="" title="Página de inicio">Inicio</a>
    </div>
    <div class="navbar_link_wrapper" style="margin-left:auto;">
        <a class="navbar_link" href="/clases" style="" title="Nuestros paquetes de adiestramiento canino en Málaga">Servicios</a>
        <div class="navbar_sublinks_container" style=" ">
            <a class="navbar_sublink" href="/clases/domicilio" style="">Clases a domicilio</a>
            <a class="navbar_sublink @if($pageInfo['submenu_active']=='Clases en grupo')active_sub @endif" href="/clases/grupo" style="">Clases en grupo</a>
            <a class="navbar_sublink" href="/clases/cachorros" style="">Clases para cachorros</a>
    </div>
    <div class="navbar_link_wrapper" style="">
        <a class="navbar_link" href="/quienes-somos" style="" title="Conoce al grupo Costadog">Quienes somos</a>
    </div>
    <div class="navbar_link_wrapper">
        <a class="navbar_link" href="/formate-con-nosotros" title="Conviertete en adiestrador canino">Formate con nosotros</a>
        <div class="navbar_sublinks_container">
            <a class="navbar_sublink" href="/formate-con-nosotros/formacion-basica">Formación básica</a>
            <a class="navbar_sublink" href="/formate-con-nosotros/formacion-avanzada">Formación avanzada</a>
        </div>
	</div>
    <div class="navbar_link_wrapper">
        <a class="navbar_link" href="/contactar" style="" title="Ponte en contacto con nuestros entrenadores expertos">Contactar</a>
		
    </div>
	<div class="navbar_link_wrapper">
        <a class="navbar_link" href="/testimonios-de-nuestros-clientes" title="Testimonios de nuestros clientes">Testimonios</a>
    </div>
    <div class="navbar_link_wrapper">
        <a class="navbar_link" href="/preguntas-y-respuestas" title="Preguntas y respuestas frecuentes">Preguntas</a>
    </div>
</div>

Answer 1

Добавьте max-width:100vw ( vw - ширина области просмотра ) в .navbar_maincontainer

Удалить width:100% из .navbar_link

:root {
  --main_color: #004771;
  --main_color_shade: #072060;
  --footer_color: #383838;
}

.navbar_maincontainer {
  max-width: 100vw;
  height: 50px;
  background-color: var(--main_color);
  display: flex;
  align-items: center;
  padding: 0px 100px;
  font-size: 17px;
}

.navbar_link_wrapper {
  width: auto;
  height: 100%;
  position: relative;
}

.navbar_link {
  color: white;
  font-size: 17px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 30px;
}

.navbar_link_wrapper:hover {
  background-color: var(--main_color_shade);
}

.navbar_sublinks_container {
  position: absolute;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  width: 300px;
  height: auto;
  left: 0px;
  top: -700px;
  transition: all 600ms ease;
  background-color: #383838;
  z-index: 9999999999;
  display: none;
  flex-direction: column;
}

.navbar_sublink {
  padding: 0px 15px;
  height: 50px;
  display: flex;
  align-items: center;
  transition: all 600ms ease;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
}

.navbar_sublinks_line {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  height: 1px;
  margin: 0 auto;
}

.navbar_sublinks_title {
  padding: 10px 0px;
  width: 100%;
  color: white;
  font-size: 13px;
}

.active {
  background-color: var(--main_color_shade);
}

.active_sub {
  background-color: rgba(0, 0, 0, 0.3);
}

.navbar_sublink:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.navbar_link_wrapper:hover .navbar_sublinks_container {
  display: flex;
  top: 100%;
}

<div class="navbar_maincontainer" style="">
  <div class="navbar_link_wrapper">
    <a class="navbar_link" href="/" style="" title="Página de inicio">Inicio</a>
  </div>
  <div class="navbar_link_wrapper" style="margin-left:auto;">
    <a class="navbar_link" href="/clases" style="" title="Nuestros paquetes de adiestramiento canino en Málaga">Servicios</a>
    <div class="navbar_sublinks_container" style=" ">
      <a class="navbar_sublink" href="/clases/domicilio" style="">Clases a domicilio</a>
      <a class="navbar_sublink @if($pageInfo['submenu_active']=='Clases en grupo')active_sub @endif" href="/clases/grupo" style="">Clases en grupo</a>
      <a class="navbar_sublink" href="/clases/cachorros" style="">Clases para cachorros</a>
    </div>
    <div class="navbar_link_wrapper" style="">
      <a class="navbar_link" href="/quienes-somos" style="" title="Conoce al grupo Costadog">Quienes somos</a>
    </div>
    <div class="navbar_link_wrapper">
      <a class="navbar_link" href="/formate-con-nosotros" title="Conviertete en adiestrador canino">Formate con nosotros</a>
      <div class="navbar_sublinks_container">
        <a class="navbar_sublink" href="/formate-con-nosotros/formacion-basica">Formación básica</a>
        <a class="navbar_sublink" href="/formate-con-nosotros/formacion-avanzada">Formación avanzada</a>
      </div>
    </div>
    <div class="navbar_link_wrapper">
      <a class="navbar_link" href="/contactar" style="" title="Ponte en contacto con nuestros entrenadores expertos">Contactar</a>

    </div>
    <div class="navbar_link_wrapper">
      <a class="navbar_link" href="/testimonios-de-nuestros-clientes" title="Testimonios de nuestros clientes">Testimonios</a>
    </div>
    <div class="navbar_link_wrapper">
      <a class="navbar_link" href="/preguntas-y-respuestas" title="Preguntas y respuestas frecuentes">Preguntas</a>
    </div>
  </div>