меню гамбургера за флажком на мобильных телефонах, но оно не работает

Question

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

#page-nav {width: 100%;}
#page-nav label, #hamburger {display: none;}
#page-nav ul {font-family: 'Monserrat' sans-serif; font-size: 18px; color: white; list-style-type: none; margin: 0; padding: 0;}
#page-nav ul li {text-align: center; display: inline-block; padding: 10px; width: 11.11%; box-sizing: border-box;}
#page-nav ul li a {color: #fff; text-decoration: none;}a {text-decoration: none; color: #232323; transition: color 0.3s ease;}
li:visited {background: #0000EE; color: #fff;}
li:active, .active {background: #0000EE; color: #fff;}
li:hover {background: #0000EE; color: #fff;}

  /* Show Hamburger */
@media screen and (max-width: 768px){
#page-nav {background-color: #3333FF;}
#page-nav label {display: inline-block; color: #fff; background: #3333FF; font-style: normal; font-size: 2em; padding-bottom: 8px; padding-right:-50px; z-index: 3; transition: color 0.3s ease;}
#page-nav ul {display: none;}
#page-nav ul li {width: 22.22%; display: block; border-top: 1px solid #333;}
#page-nav input[type=checkbox]checked ~ ul{display: block; }
#page-nav ul li:active {display: inline;}```

html ```<nav id="page-nav"><label for="#hamburger">&#9776;</label><input type="checkbox">
<ul>
<li><a href="http:/index.html">Home</a></li>
<li><a href="http:/contacts.html">Contacts</a></li>
<li class="active"><a href="http://news.html">News</a></li>
<li><a href="http://members.html">Members</a></li>
<li><a href="http://policies.html">Policies</a></li>
<li><a href="http://www.hubb.org.uk/volunteer.html">Volunteer</a></li><li><a href="http://links.html">Links</a></li></ul></nav>

html css checkbox navigation

0

quartzy

Answer 1

Я не уверен, что это то, что вы хотели, но проверьте это:

#page-nav {
  background-color: #3333FF;
  display:flex;
  flex-direction: row-reverse; 
  justify-content: flex-end;
}

Answer 2

Я не уверен, что именно вам нужно. Как я понял, вы хотите, чтобы ваш флажок был слева от навигации перед меню гамбургера?

Вы можете установить флажок в вашем CSS-файле:

#page-nav input[type="checkbox"] {
    float:left;
}

Или вы можете просто поменять метку и ввести в HTML

<input type="checkbox"><label for="#hamburger">&#9776;</label>

меню гамбургера за флажком на мобильных телефонах, но оно не работает

2 ответа

Новые вопросы

html