Как исправить медиа-запрос для мобильных устройств с помощью CSS ⇐ CSS

[Anonymous]

У меня возникли проблемы с медиа-запросом. Когда я просматриваю свой веб-сайт чем-то большим, чем телефон, моя контактная форма работает так, как задумано. Но как только размер моей навигации становится ниже 768 пикселей, мои поля в форме ведут себя как ссылка, что, как я предполагаю, связано с моей раскрывающейся панелью навигации. Я хочу иметь возможность один раз нажать на поле контактной формы на своем мобильном телефоне, а не действовать как панель навигации. Код моего CSS приведен ниже.
Вот мой код:

My Name


Home
About
Education
Skills
Contact





'''
var submitted=false


Contact Me!





























Submit





@media (max-width: 768px){

#menu-icon{
display: block;
}

section{
padding: none;
}
.navbar {
position: absolute;
top: 100%;
left: 0%;
width: 100%;
padding: 1rem 4%;
z-index: -1;
transition: .25s ease;
transition-delay: .25s;
}

.navbar.active{
left:0;
transition-delay: 0s;

}

.navbar .active-nav {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--bg-color);
border-top: .1rem solid rgba( 0, 0, 0, .2);
z-index: -1;
transition: .25s ease;
transition-delay: 0s;

}

.navbar.active .active-nav{
left:0;
transition-delay: .25s;
}

.navbar a {
display: block;
font-size: 2rem;
margin: 3rem 0;
transform: translateX(-20rem);
transition: .25s ease;
transition-delay: 0s;
}

.navbar.active a{
transform: translateX(0);
transition-delay: .25s;
}

}

@media (max-width: 520px){
html{
font-size: 50%;
}

.home-content h1{
display: flex;
flex-direction:column;

}

.home-sci{
width:160px;
}

.home-sci a{
width: 38px;
height: 38px;
}
}

@media (max-width: 462px){
.home-content h1{
font-size: 5.2rem;
}

.education{
padding: 10rem 4% 5rem 5%;
}

.footer{
flex-direction: column-reverse;
}

.footer p{
margin-top: 2rem;
text-align: center;
}
}

@media (max-width: 371px){
.home {
justify-content: center;
}

.home-content{
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
}
.home-content .home-sci{
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
position: relative;
}
}

//Toggle icon navbar
let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
menuIcon.classList.toggle('bx-x');
navbar.classList.toggle('active');
}
//Scroll Sections
let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');

window.onscroll = () => {
sections.forEach(sec => {
let top = window.scrollY;
let offset = sec.offsetTop - 100;
let height = sec.offsetHeight;
let id = sec.getAttribute('id');

if(top >= offset && top < offset + height) {
//active navbar links
navLinks.forEach(links => {
links.classList.remove('active');
document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
});
}
});
//sticky header
let header = document.querySelector('header');

header.classList.toggle('sticky', window.scrollY > 100);

/* remove toggle icon and navbar when click navbar links (scroll) */
menuIcon.classList.remove('bx-x');
navbar.classList.remove('active');

}

function togglePopup(){
document.getElementById("popup-1").classList.toggle("active")
}

document.addEventListener('keydown', function(event){
if(event.key === "Escape"){
document.getElementById("popup-1").classList.toggle("active");
}
});

closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal')
closeModal(modal)
})
})





Подробнее здесь: https://stackoverflow.com/questions/782 ... -using-css