header { background-color: #fff; border-bottom: 1px solid #dadce0; position: sticky; z-index: 1000; top: 0; } header.search { position: unset; border-bottom-width: 0; } header.search .header { padding: 0; } header.search ~ #content, header.search ~ footer { display: none; } header.search .header__logo, header.search .header__search-button, header.search .header__account { display: none; } header.search .search__input { position: sticky; top: 0; z-index: 1000; } .header { display: flex; align-items: center; padding: 10px 20px; position: relative; } .header__menu-button { line-height: 0; cursor: pointer; } .header__menu-button svg { fill: #636363; height: 24px; } .header__search-button { padding: 10px; margin-left: auto; line-height: 0; } .header__search-button svg path { fill: var(--primary-color); } .header__logo { display: flex; } .header__logo a { display: inline-block; } .header__logo img { height: 35px; } .header__search { display: none; background-color: #fff; flex: 1; } header.search .header__search { display: block; } .header__account { display: flex; margin-left: 10px; justify-content: end; } .header__account img { border-radius: 50%; height: 40px; background-color: var(--primary-color); } .search__input { background-color: #dbdbdb; display: flex; align-items: center; position: relative; padding: 10px; } .search__input.pure-form input { background-color: #fff; flex: 1; padding: 10px 10px 10px 15px; font-size: 16px; border-radius: 8px; border: 0; margin: 0; box-shadow: none; }