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

[Anonymous]

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

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

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