Преобразовать горизонтальное меню в вертикальное

Question

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

Я пытался сделатьэто со скрытым переполнением, однако это, кажется, не работает

My nav HTML Code:

<nav>

        <div id ="wrapper">

            <div class="logo" >

                <h2> Navbar </h2>


            </div>

            <ul>
                <li><a href="#"> Home </a></li>
                <li><a href="#"> About </a></li>
                <li><a href="#"> Pricings </a></li>
                <li><a href="#"> Blog </a></li>
                <li><a href="#" class="exclusive"> Contact </a></li>
            </ul>

            <div id="toggle">
                <div id="one" class="line"> </div>
                <div id="two" class="line"> </div>
                <div id="three" class="line"> </div>
            </div>



        </div>

    <!--    
        <div id="place">
                <ul id="resize">
                    <li><a href="#"> Home </a></li>
                    <li><a href="#"> About </a></li>
                    <li><a href="#"> Pricings </a></li>
                    <li><a href="#"> Blog </a></li>
                    <li><a href="#"> Contact </a></li>
                </ul>
            </div>
            -->
    </nav>

Весь код: https://jsfiddle.net/20ynL31t/1/

Answer 1

Я думаю, вам нужно, чтобы меню было полноэкранным, и вот ссылка: https://codepen.io/mk_dev/pen/pOqwpo

<input type="checkbox" id="op" autocomplete="off">

Самый простой способ - использовать флажок, который при проверке открывает меню и отображаетссылки меню.

Answer 2

Попробуйте использовать

#wrapper ul li {
display: block;
}

Answer 3

Вы должны удалить width: 100% из элемента li следующим образом:

#wrapper ul li {
    text-align: center;
    padding: 0px;
    margin: 0 5px;
}