Мое текущее меню навигации покрывает содержимое моего веб-сайта, когда я уменьшаю размер экрана до мобильного. Кроме того, он имеет прокручиваемые ссылки с каждым элементом меню, поэтому всякий раз, когда я нажимаю на опцию, он прокручивается до этого раздела на веб-сайте.
Моя проблема в том, что мой заголовок, например "Раздел 1", покрывается моим меню.
вот мой текущий код для моего @media, и он укладывает каждый элемент меню поверх друг друга.
@media only screen and (max-width: 850px) {
.menu-items {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
height: 5px;
}
}
Вот HTML для первого раздела
<body>
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page</h1>
</header>
I
<section id="section1" data-nav="Section 1" class="active">
<div class="landing__container">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
fermentum metus faucibus
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar
gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam.
Cras eu tincidunt arcu,
</p>
</div>
</section>
Есть ли простое исправление, чтобы убедиться, что мое меню выдвигает любой контент HTML под ним?
Вот как я создал свое меню навигации с помощью Javascript
const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];
items.forEach((item, i) => {
const el = document.createElement("a");
el.innerText = item;
el.classList.add("menu-items");
el.setAttribute("id", `menu-${i + 1}`);
el.href = `#section${i + 1}`;
navList.appendChild(el);
});
Вот CSS для панели навигации и заголовка страницы
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}