Как остановить прокрутку тела в менюCSS

Разбираемся в CSS
Ответить
Anonymous
 Как остановить прокрутку тела в меню

Сообщение Anonymous »

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

Код: Выделить всё

nav {
display: flex;
height: 120px;
width: 100%;
background: #1b1b1b;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}

nav .logo {
color: #fff;
font-size: 35px;
font-weight: 600;
}

nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}

nav ul li {
margin: 0 5px;
}

nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}

nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}

nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}

input[type="checkbox"] {
display: none;
}

@media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}

@media (max-width: 920px) {
nav .menu-btn i {
display: block;
}

#click:checked~.menu-btn i:before {
content: "\f00d";
}

nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display:block;
transition: all 0.3s ease;
z-index: 2;
overflow: hidden;
}

#click:checked~ul {
left: 0;
}

nav ul li {
width: 100%;
margin: 40px 0;
}

nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#click:checked~ul li a {
margin-left: 0px;
}

nav ul li a.active,
nav ul li a:hover {
background: none;
color: rgb(255, 0, 0);
}
}

HTML

Код: Выделить всё


NavBar

[i]

[/i]

[list]
[*][url=#]Acasa[/url]
[*][url=#]Prices[/url]
[*][url=#]General[/url]
[*][url=#]Services[/url]
[*][url=#]About[/url]
[*][url=#]Contact[/url]
[/list]

Как это решить?
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/784 ... le-in-menu
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»