ヘッダーボタンを追加している状態で、スマートフォンでのアクセス時に表示されるメニューボタンアイコンの線を補足するCSSです。

:root {
  --menu-btn-color: #000;
}
.header__menuOpenBtn {
    position: relative;
    overflow: hidden;
}
.header__menuOpenBtn svg,
.header__menuCloseBtn svg{
    display: none;
}
.header__menuOpenBtn:before {
    position: absolute;
    display: block;
    content: "";
    top: -18px;
    left: 7px;
    box-shadow: 
        0px 1px var(--menu-btn-color),
        0px 10px #fff,
        0px 11px var(--menu-btn-color),
        0px 21px #fff,
        0px 22px var(--menu-btn-color);
    width: 26px;
    height: 26px;
}

.header__menuCloseBtn:before,
.header__menuCloseBtn:after {
    position: absolute;
    display: block;
    content: "";
    top: 6px;
    background-color: var(--menu-btn-color);
    width: 25px;
    height: 1px;
}

.header__menuCloseBtn:before {
    left: 17px;
    transform: rotate(45deg);
    transform-origin: top left;   
}
.header__menuCloseBtn:after {
    right: 6px;
    transform: rotate(-45deg);
    transform-origin: top right;
}