I have a complex split menu created with div's. I have the design for the most part sorted out. When you shrink the page in the code pen you can see there is a media query and the navigation top bar shrinks down in a responsive manner to accommodate mobile devices. What I need help with is adding a "Hamburger" icon to the upper right of the navigation once it shrinks down to a vertical nav, and use the icon to expand/collapse the nav. Here is a codepen you can work on.
CodePen https://codepen.io/R-P-P/pen/OPLgoVb
HTML
<div class="navcontainerhome"><div>Home</div><div>Donors</div><div>Donate</div><div>Gallery</div><div>Directory</div><div>About</div><div>Contact</div><div>Curate</div><div>Stats</div> </div> <div class="navcontainerfollow"> <div id="followsocial">FOLLOW</div><div>Gettr</div><div>IG</div><div>LinkedIn</div><div>Reddit</div><div>Telegram</div><div>TikTok</div><div>Truth</div><div>X</div></div> <div class="navcontainershare"><div id="sharesocial">SHARE</div><div>Facebook</div><div>Gettr</div><div>LinkedIn</div><div>Pinterest</div><div>Reddit</div><div>Telegram</div><div>Truth</div><div>X</div> </div>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; } }All help appreciated.
