I am having difficult creating a responsive header/navbar for our website. I want to utilize a hamburger menu for mobile devices, but I can't figure out the CSS/JS necessary. Our header consists of the background, logo, a link to the external account page, and a menu with 3 dropdowns. Here's the preview: https://app.hubspot.com/design-previewer/5104295/modules/17491052601
ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline; color: white; font-family: arial; font-size: 20px; padding: 0px 30px; } li:hover { color: yellow; cursor: default; } /* Style The Dropdown Button */ .dropbtn { color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .active { color:red; } /* The container <div> - needed to position the dropdown content */ .dropdown { display: inline-block; max-height: 0px; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: black; font-family: arial; font-size: 16px; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { background-color: #3e8e41; } .sticky { position: fixed; top: 0; width: 100%; z-index: 99; } .sticky + .content { padding-top: 102px; }
JS:
// When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()};
// Get the header var header = document.getElementById("ANHeader");
// Get the offset position of the navbar var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } }