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

[Anonymous]

У меня есть сложное разделенное меню, созданное с помощью элементов div. С дизайном у меня по большей части разобрались. Когда вы уменьшаете страницу в кодовом пере, вы можете видеть, что есть медиа-запрос, а верхняя панель навигации сжимается, чтобы адаптироваться к мобильным устройствам. Мне нужна помощь, так это добавить значок «Гамбургер» в правом верхнем углу навигации, когда он сжимается до вертикальной навигации, и использовать этот значок для развертывания/свертывания навигации. Вот код, над которым вы можете работать.
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 ... x-div-menu