响应式导航栏不粘在某些屏幕上
Responsive nav bar not sticking on some screens
我的网页上的任务栏有问题。在笔记本电脑屏幕上向下滚动时它是“粘性的”，即使我将 window 调整为导航菜单进入切换的大小也是如此。
然而，当我使用检查器在 IPhone 或使用 chrome 检查器的任何屏幕类型上查看它时，“粘性”导航不起作用，直到我向下滚动页面一半，然后备份。
我也很感激任何能帮助我改进目前工作的更正，我是一个完全的初学者。
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
const navLogo = document.querySelector("li.nav-logo");
const navbar = document.querySelector('.main-nav');
const sticky = navbar.offsetTop;
window.addEventListener("scroll", stickyNav);
function stickyNav() {
if (window.scrollY >= sticky) {
// document.body.style.paddingTop = navbar.offsetHeight + 'px';
document.body.style.paddingTop = 0;
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
document.body.style.paddingTop = 0;
}
}
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
//Animate navLinks
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
navLogo.style.display = 'flex';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
navLogo.style.display = 'none';
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
caret-color: transparent;
font-family: 'Roboto', sans-serif;
}
/* --------------------------------- Nav -------------------------------------------- */
/*Nav bar*/
/* Nav bar size and position */
.main-nav {
display: flex;
width: 100%;
transition: all 0.5s linear;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
/*List on the task bar*/
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
list-style: none;
transition: all 0.05s linear;
padding: 2px;
}
/*links on the task bar*/
.nav-links a {
color: #0C3D8D;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
position: relative;
}
/*Hover change*/
.nav-links a:hover {
color: #95989A;
font-size: 18px;
}
/* ------------------------------------- Sticky nav logo ---------------------------------------- */
/*Nav bar logo hidden*/
li.nav-logo {
padding-top: 5px;
padding-bottom: 5px;
max-width: 0px;
overflow: hidden;
transition: all 0.3s linear;
}
/* visible on sticky nav bar */
.sticky li.nav-logo {
display: flex;
max-width: 200px;
}
/* ----------------------------------- Sticky scroll ------------------------------------------ */
/*Stick Nav bar on scroll*/
/* Changes to task bar when scrolling */
.sticky {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(234, 234, 234, 0.895);
}
/* ----------------------------------- Language flags ------------------------------------------ */
/* Language flag information */
.languageFlag {
height: 20px;
width: 40px;
transition: all 0.2s linear;
}
/* Padding for flags*/
.language>* {
padding: 2px;
}
/* Hover change of flag icons */
.languageFlag:hover {
filter: grayscale(70%)
}
/* ----------------------------------------------------------------------------- */
/* Logo and spaceing from the top for logo*/
.logo {
display: flex;
justify-content: center;
padding-bottom: 1.5vh;
padding-top: 2vh;
}
.burger {
padding-top: 20px;
padding-left: 20px;
padding-bottom: 10px;
display: none;
cursor: pointer;
}
.burger div {
background-color: #0C3D8D;
width: 25px;
height: 3px;
margin: 5px;
transition: all 0.3s ease;
}
@media all and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
#banner {
display: none;
}
}
@media all and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 0vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.languages {
order: -2;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo-hide {
display: none;
}
.column {
display: flex;
align-items: center;
}
.column>* {
flex-basis: 100%;
padding: 2%;
}
.topImage {
display: flex;
max-width: 100%;
}
#aboutUsTitle {
text-align: center;
color: #0C3D8D;
margin-bottom: 2vh;
font-size: 2rem;
letter-spacing: 1px;
}
#promise {
text-align: center;
font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Monza</title>
</head>
<body>
<header class="logo">
<img src="Images\logo.png" alt="" width="auto" height="auto">
</header>
<nav class="main-nav">
<ul class="nav-links">
<li class="nav-logo">
<a href="#"><img src="Images\logo.png" alt="" width="200px" height="auto"></a>
</li>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/aboutus">About us</a>
</li>
<li>
<a href="/services">Services</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
<li class="language">
<a href="#"><img src="Images\de.png" alt="" srcset="" class="languageFlag" id="languageFlagOne"></a>
<a href="#"><img src="Images\gb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo"></a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="navbar.js"></script>
<script src="app.js"></script>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
dolorem.
</p>
</body>
</html>
其实是因为你的logo。当屏幕缩小时，您没有在媒体查询中对其进行任何操作，因此它会像您编写的那样粘在 header 的顶部。如果将徽标 class 添加到媒体查询并适当设置样式，则可以防止它破坏粘性导航。查看代码段，确保您也在移动设备上查看它。
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
const navLogo = document.querySelector("li.nav-logo");
const navbar = document.querySelector('.main-nav');
const sticky = navbar.offsetTop;
window.addEventListener("scroll", stickyNav);
function stickyNav() {
if (window.scrollY >= sticky) {
// document.body.style.paddingTop = navbar.offsetHeight + 'px';
document.body.style.paddingTop = 0;
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
document.body.style.paddingTop = 0;
}
}
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
//Animate navLinks
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
navLogo.style.display = 'flex';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
navLogo.style.display = 'none';
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
caret-color: transparent;
font-family: 'Roboto', sans-serif;
}
/* --------------------------------- Nav -------------------------------------------- */
/*Nav bar*/
/* Nav bar size and position */
.main-nav {
display: flex;
width: 100%;
transition: all 0.5s linear;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
/*List on the task bar*/
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
list-style: none;
transition: all 0.05s linear;
padding: 2px;
}
/*links on the task bar*/
.nav-links a {
color: #0C3D8D;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
position: relative;
}
/*Hover change*/
.nav-links a:hover {
color: #95989A;
font-size: 18px;
}
/* ------------------------------------- Sticky nav logo ---------------------------------------- */
/*Nav bar logo hidden*/
li.nav-logo {
padding-top: 5px;
padding-bottom: 5px;
max-width: 0px;
overflow: hidden;
transition: all 0.3s linear;
}
/* visible on sticky nav bar */
.sticky li.nav-logo {
display: flex;
max-width: 200px;
}
/* ----------------------------------- Sticky scroll ------------------------------------------ */
/*Stick Nav bar on scroll*/
/* Changes to task bar when scrolling */
.sticky {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(234, 234, 234, 0.895);
}
/* ----------------------------------- Language flags ------------------------------------------ */
/* Language flag information */
.languageFlag {
height: 20px;
width: 40px;
transition: all 0.2s linear;
}
/* Padding for flags*/
.language>* {
padding: 2px;
}
/* Hover change of flag icons */
.languageFlag:hover {
filter: grayscale(70%)
}
/* ----------------------------------------------------------------------------- */
/* Logo and spaceing from the top for logo*/
.logo {
display: block;
margin: 0 auto;
padding-bottom: 1.5vh;
padding-top: 2vh;
width: 200px;
height: auto;
}
.burger {
padding-top: 20px;
padding-left: 20px;
padding-bottom: 10px;
display: none;
cursor: pointer;
}
.burger div {
background-color: #0C3D8D;
width: 25px;
height: 3px;
margin: 5px;
transition: all 0.3s ease;
}
@media all and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
#banner {
display: none;
}
}
@media all and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 0vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.languages {
order: -2;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.logo {
position: fixed;
top: 0;
right: 0;
z-index: 10;
height: 59px;
width: auto;
padding-bottom: 0;
padding-top: 0;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo-hide {
display: none;
}
.column {
display: flex;
align-items: center;
}
.column>* {
flex-basis: 100%;
padding: 2%;
}
.topImage {
display: flex;
max-width: 100%;
}
#aboutUsTitle {
text-align: center;
color: #0C3D8D;
margin-bottom: 2vh;
font-size: 2rem;
letter-spacing: 1px;
}
#promise {
text-align: center;
font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Monza</title>
</head>
<body>
<header>
<img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt="">
</header>
<nav class="main-nav">
<ul class="nav-links">
<li class="nav-logo">
<a href="#"><img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt=""></a>
</li>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/aboutus">About us</a>
</li>
<li>
<a href="/services">Services</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
<li class="language">
<a href="#"><img src="Images\de.png" alt="" srcset="" class="languageFlag" id="languageFlagOne"></a>
<a href="#"><img src="Images\gb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo"></a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="navbar.js"></script>
<script src="app.js"></script>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
dolorem.
</p>
</body>
</html>
我的网页上的任务栏有问题。在笔记本电脑屏幕上向下滚动时它是“粘性的”，即使我将 window 调整为导航菜单进入切换的大小也是如此。
然而，当我使用检查器在 IPhone 或使用 chrome 检查器的任何屏幕类型上查看它时，“粘性”导航不起作用，直到我向下滚动页面一半，然后备份。
我也很感激任何能帮助我改进目前工作的更正，我是一个完全的初学者。
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
const navLogo = document.querySelector("li.nav-logo");
const navbar = document.querySelector('.main-nav');
const sticky = navbar.offsetTop;
window.addEventListener("scroll", stickyNav);
function stickyNav() {
if (window.scrollY >= sticky) {
// document.body.style.paddingTop = navbar.offsetHeight + 'px';
document.body.style.paddingTop = 0;
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
document.body.style.paddingTop = 0;
}
}
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
//Animate navLinks
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
navLogo.style.display = 'flex';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
navLogo.style.display = 'none';
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
caret-color: transparent;
font-family: 'Roboto', sans-serif;
}
/* --------------------------------- Nav -------------------------------------------- */
/*Nav bar*/
/* Nav bar size and position */
.main-nav {
display: flex;
width: 100%;
transition: all 0.5s linear;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
/*List on the task bar*/
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
list-style: none;
transition: all 0.05s linear;
padding: 2px;
}
/*links on the task bar*/
.nav-links a {
color: #0C3D8D;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
position: relative;
}
/*Hover change*/
.nav-links a:hover {
color: #95989A;
font-size: 18px;
}
/* ------------------------------------- Sticky nav logo ---------------------------------------- */
/*Nav bar logo hidden*/
li.nav-logo {
padding-top: 5px;
padding-bottom: 5px;
max-width: 0px;
overflow: hidden;
transition: all 0.3s linear;
}
/* visible on sticky nav bar */
.sticky li.nav-logo {
display: flex;
max-width: 200px;
}
/* ----------------------------------- Sticky scroll ------------------------------------------ */
/*Stick Nav bar on scroll*/
/* Changes to task bar when scrolling */
.sticky {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(234, 234, 234, 0.895);
}
/* ----------------------------------- Language flags ------------------------------------------ */
/* Language flag information */
.languageFlag {
height: 20px;
width: 40px;
transition: all 0.2s linear;
}
/* Padding for flags*/
.language>* {
padding: 2px;
}
/* Hover change of flag icons */
.languageFlag:hover {
filter: grayscale(70%)
}
/* ----------------------------------------------------------------------------- */
/* Logo and spaceing from the top for logo*/
.logo {
display: flex;
justify-content: center;
padding-bottom: 1.5vh;
padding-top: 2vh;
}
.burger {
padding-top: 20px;
padding-left: 20px;
padding-bottom: 10px;
display: none;
cursor: pointer;
}
.burger div {
background-color: #0C3D8D;
width: 25px;
height: 3px;
margin: 5px;
transition: all 0.3s ease;
}
@media all and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
#banner {
display: none;
}
}
@media all and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 0vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.languages {
order: -2;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo-hide {
display: none;
}
.column {
display: flex;
align-items: center;
}
.column>* {
flex-basis: 100%;
padding: 2%;
}
.topImage {
display: flex;
max-width: 100%;
}
#aboutUsTitle {
text-align: center;
color: #0C3D8D;
margin-bottom: 2vh;
font-size: 2rem;
letter-spacing: 1px;
}
#promise {
text-align: center;
font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Monza</title>
</head>
<body>
<header class="logo">
<img src="Images\logo.png" alt="" width="auto" height="auto">
</header>
<nav class="main-nav">
<ul class="nav-links">
<li class="nav-logo">
<a href="#"><img src="Images\logo.png" alt="" width="200px" height="auto"></a>
</li>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/aboutus">About us</a>
</li>
<li>
<a href="/services">Services</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
<li class="language">
<a href="#"><img src="Images\de.png" alt="" srcset="" class="languageFlag" id="languageFlagOne"></a>
<a href="#"><img src="Images\gb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo"></a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="navbar.js"></script>
<script src="app.js"></script>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
dolorem.
</p>
</body>
</html>
其实是因为你的logo。当屏幕缩小时，您没有在媒体查询中对其进行任何操作，因此它会像您编写的那样粘在 header 的顶部。如果将徽标 class 添加到媒体查询并适当设置样式，则可以防止它破坏粘性导航。查看代码段，确保您也在移动设备上查看它。
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
const navLogo = document.querySelector("li.nav-logo");
const navbar = document.querySelector('.main-nav');
const sticky = navbar.offsetTop;
window.addEventListener("scroll", stickyNav);
function stickyNav() {
if (window.scrollY >= sticky) {
// document.body.style.paddingTop = navbar.offsetHeight + 'px';
document.body.style.paddingTop = 0;
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
document.body.style.paddingTop = 0;
}
}
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
//Animate navLinks
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
navLogo.style.display = 'flex';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
navLogo.style.display = 'none';
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
caret-color: transparent;
font-family: 'Roboto', sans-serif;
}
/* --------------------------------- Nav -------------------------------------------- */
/*Nav bar*/
/* Nav bar size and position */
.main-nav {
display: flex;
width: 100%;
transition: all 0.5s linear;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
/*List on the task bar*/
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
list-style: none;
transition: all 0.05s linear;
padding: 2px;
}
/*links on the task bar*/
.nav-links a {
color: #0C3D8D;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
position: relative;
}
/*Hover change*/
.nav-links a:hover {
color: #95989A;
font-size: 18px;
}
/* ------------------------------------- Sticky nav logo ---------------------------------------- */
/*Nav bar logo hidden*/
li.nav-logo {
padding-top: 5px;
padding-bottom: 5px;
max-width: 0px;
overflow: hidden;
transition: all 0.3s linear;
}
/* visible on sticky nav bar */
.sticky li.nav-logo {
display: flex;
max-width: 200px;
}
/* ----------------------------------- Sticky scroll ------------------------------------------ */
/*Stick Nav bar on scroll*/
/* Changes to task bar when scrolling */
.sticky {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(234, 234, 234, 0.895);
}
/* ----------------------------------- Language flags ------------------------------------------ */
/* Language flag information */
.languageFlag {
height: 20px;
width: 40px;
transition: all 0.2s linear;
}
/* Padding for flags*/
.language>* {
padding: 2px;
}
/* Hover change of flag icons */
.languageFlag:hover {
filter: grayscale(70%)
}
/* ----------------------------------------------------------------------------- */
/* Logo and spaceing from the top for logo*/
.logo {
display: block;
margin: 0 auto;
padding-bottom: 1.5vh;
padding-top: 2vh;
width: 200px;
height: auto;
}
.burger {
padding-top: 20px;
padding-left: 20px;
padding-bottom: 10px;
display: none;
cursor: pointer;
}
.burger div {
background-color: #0C3D8D;
width: 25px;
height: 3px;
margin: 5px;
transition: all 0.3s ease;
}
@media all and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
#banner {
display: none;
}
}
@media all and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 0vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.languages {
order: -2;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.logo {
position: fixed;
top: 0;
right: 0;
z-index: 10;
height: 59px;
width: auto;
padding-bottom: 0;
padding-top: 0;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo-hide {
display: none;
}
.column {
display: flex;
align-items: center;
}
.column>* {
flex-basis: 100%;
padding: 2%;
}
.topImage {
display: flex;
max-width: 100%;
}
#aboutUsTitle {
text-align: center;
color: #0C3D8D;
margin-bottom: 2vh;
font-size: 2rem;
letter-spacing: 1px;
}
#promise {
text-align: center;
font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Monza</title>
</head>
<body>
<header>
<img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt="">
</header>
<nav class="main-nav">
<ul class="nav-links">
<li class="nav-logo">
<a href="#"><img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt=""></a>
</li>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/aboutus">About us</a>
</li>
<li>
<a href="/services">Services</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
<li class="language">
<a href="#"><img src="Images\de.png" alt="" srcset="" class="languageFlag" id="languageFlagOne"></a>
<a href="#"><img src="Images\gb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo"></a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="navbar.js"></script>
<script src="app.js"></script>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
dolorem.
</p>
</body>
</html>