Если объекту nav-list
задать background-color
то все становится понятно.
Есть некоторые замечания по коду, но я их оставлю при себе.
Моя реализация вашей задачи:
document.addEventListener("DOMContentLoaded", function(event) {
const navBtn = document.querySelector('.nav-btn');
const navigation = document.querySelector('.nav');
navBtn.addEventListener('click', () => {
navigation.classList.toggle('nav-open');
if (navigation.classList.contains('nav-open')) {
navBtn.src = 'https://cs6.pikabu.ru/avatars/363/v363925-755357385.jpg';
document.querySelector(".nav-list").setAttribute("style", "margin-block-start:7em;");
} else {
navBtn.src = 'https://brandfans.ru/images/menu.png';
document.querySelector(".nav-list").setAttribute("style", "margin-block-start:0em;");
}
});
});
.container {
width: 100%;
max-width: 1445px;
margin: 0 auto;
/*padding: 0 15px;*/
}
/* header */
.header {
font-family: 'Rubik', sans-serif;
}
.header-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-nav div:nth-child(1) {
order: 0;
}
.header-nav div:nth-child(2) {
order: 1;
}
.header-nav div:nth-child(3) {
order: 2;
}
.header-logo {
margin-right: auto;
/* margin-top: 32px;*/
}
.nav-list {
display: flex;
column-gap: 36px;
margin-top: 41px;
}
.nav-link {
font-weight: 400;
font-size: 18px;
line-height: 18px;
color: rgba(34, 35, 38, 0.8);
}
.nav-link:hover {
font-weight: 600;
color: #222326;
}
.nav-btn {
width: 25px;
height: 25px;
display: none;
}
.phone-img {
/* margin-left: auto;
margin-top: 34px;*/
}
.phone {
margin-left: 12px;
/* margin-top: 27px;*/
}
.phone-info {
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #000000;
}
.phone-link {
font-weight: 400;
font-size: 18px;
line-height: 21px;
color: #000000;
}
.phone-link:hover {
text-shadow: 1px 1px 1px #222326;
cursor: pointer;
}
@media (max-width: 1050px) {
/* header */
.nav-list {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #fff;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
transform: translateY(-100%);
transition: 0.3s ease;
}
.nav-btn {
/*display: inline-block;*/
display: block;
}
.nav-open .nav-list {
transform: translateY(0);
}
.nav-item {
padding: 40px 0;
font-size: 40px;
}
.header-logo {
z-index: 5;
}
.header-nav div:nth-child(1) {
order: 0;
}
.header-nav div:nth-child(2) {
order: 2;
}
.header-nav div:nth-child(3) {
order: 1;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Кнопка</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
</head>
<body>
<header class="header">
<div class="container">
<div class="header-nav">
<div>
<img src="https://cdn.icon-icons.com/icons2/1914/PNG/512/applelogotype_121536.png" alt="logo" class="header-logo" style="width:50px;height:50px;">
</div>
<div>
<nav class="nav">
<img src="https://brandfans.ru/images/menu.png" alt="" class="nav-btn" style="width:50px;height:50px;">
<ul class="nav-list" style="margin-block-start:0em;">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="#" class="nav-link">Testimonials</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
<div style="display:flex;align-items:center;">
<img src="https://images.satu.kz/159575824_159575824.jpg" alt="icon phone" class="phone-img" style="width:50px;height:50px;">
<div class="phone">
<p class="phone-info">Call us now</p>
<span><a href="tel:+12434214121" class="phone-link">+1 (243) 421 4121</a></span>
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
скрины:
