Как расположить два дива с одинаковыми классами вертикально друг под другом?

Question

[Алексей Сеньчук]

Здравствуйте, во время написания адаптива сайта столкнулся с такой проблемой, у меня есть data file в котором я храню данные navbar-а. Само меню делиться на две части: левую и правую. С помощью "display: flex; flex-direction: column;" не работает по понятным причинам, кто-нибудь встречался с подобного рода проблемой и знает её решение?

Пишу на ReactJS с Sass, вот код:

import React, { useEffect, useState } from 'react'
import { getRightTopNav, getLeftTopNav } from '../../Data/Navbars';
import Logo from '../../Images/Logo.png'
import '../../Scss/header.scss'

const Header = () => {

  const [rightNavItems, rightSetNavItems] = useState([]);
  const [leftNavItems, leftSetNavItems] = useState([]);

  useEffect(() => {
    rightSetNavItems(getRightTopNav());
  }, [])

  useEffect(() => {
    leftSetNavItems(getLeftTopNav());
  }, [])

  return (
    <header>
      <nav className="nav">
        <div className="right__items">

          <img src={Logo} alt="logo" className="logo" />
          
          <ul className="nav__menu ">

            {rightNavItems.map((item) => (
              <li key={item.id} className="nav__item">
                <a href={item.href} className="nav__link"> {item.label} </a>
              </li>
            ))}

          </ul>

        </div>

        <div className="left__items">

          <ul className="nav__menu">

            {leftNavItems.map((item) => (
              <li key={item.id} className="nav__item">
                <a href={item.href} className="nav__link"> {item.label} </a>
              </li>
            ))}

          </ul>

          <button className="getApp-btn">Get app</button>

        </div>

        <div className="toggler__icon">
          <div className="line_1"></div>
          <div className="line_2"></div>
          <div className="line_3"></div>
        </div>

      </nav>
    </header>
  )
}

export default Header

Sass:

@import './style.scss';

header {
    position: fixed;
    border-bottom: $border-color;
    box-shadow: $box-shadow;

    .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 10vh;
        width: 80%;
        margin: 0 auto;

        .right__items,
        .left__items {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;

            .logo {
                height: 4vh;
                margin-right: 1.5vw;
            }

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

            .nav__link {
                color: $text-color;
            }

            .getApp-btn {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background-color: $bg-color;
                border: 1px solid $border-color;
                -moz-border-radius: 100px;
                -webkit-border-radius: 100px;
                border-radius: 100px;
                padding: 1.5vh 1.5vw;
                margin-left: 1.5vw;
            }
        }

        .toggler__icon {
            cursor: pointer;
            display: none;

            div {
                width: 18px;
                height: 2px;
                background: #000;
                margin: 5px 0;
            }
        }

    }
}

@media screen and (max-width: 920px) {
    .getApp-btn {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .toggler__icon {
        display: block !important;
    }

    .nav__menu {
        ???
    }
}

Comments

[Ankhena]

Вы знаете, два блочных элемента идут друг под другом сами по себе.

Но в коде вы для nav задали флекс и элементы встали рядом.
Т.е. нужно отменить флексовость родителя или переделать на флекс колонками (фик знает, почему у вас не работает) или на гриды.

Компилировать ваш код в уме не очень удобно, поэтому сделайте песочницу с минимальным кодом, нужным для демонстрации проблемы на codepen.io