<header class="header none1">
        <div class="container">
            <div class="header__top">
                <div class="header__top-row header__top-row--mobile">
                  
                    <a href="#">
                        <img src="img/logo.svg" alt="loft hous">
                    </a>
                    <nav class="header__nav">
                        <nav class="nav">
                            <ul class="nav__list">
                                <li><a href="#">О комплексе</a></li>
                                <li><a href="#">Район</a></li>
                                <li><a href="#">Каталог квартир</a></li>
                                <li><a href="#">Ипотека</a></li>
                                <li><a href="#">Контакты</a></li>
                            </ul>
                        </nav>
                    </nav>

                    <div class="header__nav-btn">
                    <button class="nav__icon-btn ">
                        <span class="span"></span>
                        <span class="span"></span>
                        <span class="span"></span>
                        <span class="span"></span>
                    </button>
                    </div>
                </div>
            </div>
            <div class="header__title">
                <h1 class="header__title-h1">Жилой комплекс <br>
                    в историческом центре
                    <a href="#benefits" class="">
                        <img src="img/mouse.svg" alt="" class="header__title-icon">
                    </a>
                </h1>
            </div>
            <div class="header__footer">
                <a href="#section-map" class="info info-map">Наб. реки Фонтанки 10-15</a>
                <a href="tel:+78121234567" class="info info--tel">8 (812) 123-45-67</a>

            </div>
        </div>
    </header>
.header {
  min-height: 840px;
  background: linear-gradient(
      180deg,
      #242b33 11.98%,
      rgba(45, 52, 60, 0.38) 51.04%,
      #242b33 92.19%
    ),
    url("/img/loftHous.jpg");
  display: flex;
  padding: 30px 0 0 0px;
 
}
.header__fon{
  /* background-color: rgba(190, 190, 190, 9);
  backdrop-filter: blur(80px); 
  height: 100%;
	width: 100%; */
 /* background-attachment: 20%; */
 opacity: .1;
 
}
.container {
  width: 1140px;
  padding: 0 15px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header__top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__top-row--mobile {
  position: fixed;
  background-color: black;
  top: 0;
  width: 70%;
  left: 0;
  height: 80%;
left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: start;
  row-gap: 30px;
 transform: translate(-50%, 0%);
 

  /* .nav__icon-btn-big::after{
  content: "X";
  color: white;
  font-size: 24px;
  display: block;
  } */
}
.header__top-row--mobile .header__nav {
  display: block;
 
  .nav__list {
    display: grid;
    row-gap: 30px;
    justify-items: center;
  }
}
.nav {
  font-size: 14px;
}
.nav__list {
  display: flex;
  gap: 0 40px;
}
.header__nav-btn {
  display: none;
}
.nav__icon-btn {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  background-color: inherit;
  border: none;
  /* display: none; */
}
.span {
  width: 40px;
  height: 2px;
  background-color: #fff;
}
.nav__icon-btn-big {
  position: absolute;
  width: 34px;
  height: 34px;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  background: #000000;
 
  background-color: #fff;
  right: 15px;
  top: 15px;
}
.header__title {
  position: relative;
  /* margin-bottom: 50px; */
}
.header__title-h1 {
  padding-bottom: 121px;
  text-align: center;
  font-size: 48px;
  font-family: var(--font-accent);
  color: var(--accent);
  font-weight: 700;
}
.header__title-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}

.header__footer {
  display: flex;
  justify-content: center;
  gap: 0 90px;
  padding-bottom: 74px;
  margin-right: 80px;
}
const navBtn = document.querySelector('.nav__icon-btn')
const iconBtn = document.querySelector('.nav__icon-btn')
const topRow = document.querySelector('.header__top-row')



navBtn.onclick = function(){
    iconBtn.classList.toggle('nav__icon-btn-big')
    topRow.classList.toggle('header__top-row--mobile')
    
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.