Как добавить «гамбургер» развернуть/свернуть в сложное разделенное меню div [закрыто] ⇐ CSS

[Anonymous]

Как добавить значок «Гамбургер», чтобы развернуть/свернуть навигацию для мобильных устройств. «Гамбургер» должен находиться в правом верхнем углу.
CodePen https://codepen.io/R-P-P/pen/OPLgoVb
HTML< /p>

Код: Выделить всё

Home
Donors
Donate
Gallery
Directory
About
Contact
Curate
Stats


FOLLOW
Gettr
IG
LinkedIn
Reddit
Telegram
TikTok
Truth
X


SHARE
Facebook
Gettr
LinkedIn
Pinterest
Reddit
Telegram
Truth
X

CSS

Код: Выделить всё

.navcontainerhome {
display: flex;
flex-direction : row;
float: left;
}

.navcontainerhome div {
border:1px solid black;
padding: 5px;
}
.navcontainerfollow {
display: flex;
flex-direction : row;
float:right;
}

.navcontainerfollow div {
border:1px solid black;
padding: 5px;
}
.navcontainershare {
display: flex;
flex-direction : row;
float:right;
}

.navcontainershare div {
border:1px solid black;
padding: 5px;
}

/* width will changed later once I have the width size of all elements */
@media only screen and (max-width: 1520px) {

.navcontainerhome {
flex-direction : column;
width: 100%;

/*background-color: lightblue;   */
}
.navcontainerfollow {
float:left;

margin: 0 auto 0 auto;
width: 100%;
min-width: 0;
}
#followsocial {
width: 80px;
}
.navcontainershare {
float:left;

margin: 0 auto 0 auto;
width: 100%;
min-width: 0;
}
#sharesocial {
width: 80px;
}
}

ПРИМЕЧАНИЕ. Я не против использования списка, я просто не смог получить макет так, как мне хотелось, используя его.


Подробнее здесь: https://stackoverflow.com/questions/793 ... t-div-menu