CSS Toggle не плавает на правой стороне

Question

Хорошо, я пытаюсь создать адаптивное навигационное меню для моего сайта. Я в настоящее время испытываю затруднения, заставляя эту чертову собственность работать. Поэтому я взял комбинацию https://www.w3schools.com/ и учебник YouTube, чтобы создать сайт, который я представляю.

Вот что я получил до сих пор ( Ссылка на мой код приведена ниже в гиперссылке на JS Fiddle )

https://jsfiddle.net/dcannon96/e9mgsLqd/

Так что если вы посмотрите на атрибут label под разделом media и screen, где максимальная ширина начинается для пикселей.

Взгляните на эту часть моего CSS.

label {
   display: block;
   cursor: pointer;
   /* float: right; */
}

Моя цель - сделать так, чтобы мое верхнее меню навигационной панели отображалось под значком гамбургера в форме мобильного телефона или планшета. В режиме рабочего стола мой список меню находится с левой стороны экрана, но когда я нахожусь в мобильном телефоне, всплывающее меню справа НЕ выводит остальные элементы под верхнюю панель навигации.

Это то, что я пытаюсь сделать https://youtu.be/xMTs8tAapnQ?t=611 ( видео пропускается до 10 минут и 11 секунд в )

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

Answer 1

Вы должны добавить overflow:hidden в меню, чтобы верхнее меню навигационной панели появилось под значком гамбургера, чтобы увидеть это https://jsfiddle.net/dow2qLck/1/

.menu {
overflow:hidden;
text-align: center;
width: 100%;
display: none;

}

Answer 2

привет, я раскомментировал свойство float:right .label, и оно было выровнено вправо. Надеюсь, это то, что вы ищете. спасибо

посетите ссылку ниже https://jsfiddle.net/dow2qLck/1/777