Добавьте значок «гамбургера» и разверните/сверните меню div. ⇐ CSS

[Anonymous]

У меня есть сложное разделенное меню, созданное с помощью DIV. С дизайном у меня по большей части разобрались. Когда вы уменьшаете страницу во фрагменте, вы можете видеть, что есть медиа-запрос, а верхняя панель навигации сжимается, чтобы адаптироваться к мобильным устройствам. Мне нужна помощь, так это добавить значок «Гамбургер» в правом верхнем углу навигации, когда он сжимается до вертикальной навигации, и использовать этот значок для развертывания/свертывания навигации. Вот код, над которым вы можете работать.

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

.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;
}

.sharefollowtitlecelsize {
min-width: 80px;
}

@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;
}

.navcontainershare {
float: left;

margin: 0 auto 0 auto;
width: 100%;
min-width: 0;
}

.sharefollowcelsize {
width: 12.5%;
text-align: center;
}
}

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

Home
Donors
Donate
Gallery
Directory
About
Contact
Curate
Stats


FOLLOW
Get
IG
In
Red
Tel
Tik
Tru
X


SHARE
Fb
Get
In
Pin
Red
Tel
Tru
X

Я попробовал трюк на флажке, но не смог заставить его работать.

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