CMS Development

SophiaAN
Membro

Responsive Header with Dropdown Navbar

Hello,

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

 

HTML: 

<div class = "header" id="ANHeader" style="background-color: #2b689c; border-radius: 20px;">
<a href="https://www.arxnimbus.com">
<img src="https://cdn2.hubspot.net/hubfs/5104295/AN%20Logo%20LinkedIn.png" style="float:left; Height: 100px; width: 100px;">
</a>
<a href="https://www.arxnimbus.com" style="color:white; font-family:arial; float: left; font-size:84px; text-decoration: none; text-shadow: 3px 2px 5px dimgray;">Arx Nimbus</a>
<h2>
<a href="https://www.arxnimbus.net" style="color:white; float:right; font-family:arial; font-size:24px; padding-right:25px; text-decoration: none; text-shadow: 3px 2px 5px dimgray;">
Account
</a>
</h2>
<div style="clear:left;"/>
<div style="clear:right;"/>
<ul>
<li class="dropdown">Risk Analytics Platform
<div class="dropdown-content">
<a href="https://www.arxnimbus.com/platform">How It Works</a>
<a href="https://www.arxnimbus.com/solutions">Solutions</a>
<a href="https://www.arxnimbus.com/resources">Resources</a>
</div>
</li>
<li class="dropdown">Customers and Partners
<div class="dropdown-content">
<a href="https://www.arxnimbus.com/customers">Customers</a>
<a href="https://www.arxnimbus.com/partners">Partners</a>
<a href="https://www.arxnimbus.com/use-cases">Use Cases</a>
</div>
</li>
<li class="dropdown">About Us
<div class="dropdown-content">
<a href="https://www.arxnimbus.com/in-the-news">News and Events</a>
<a href="https://www.arxnimbus.com/company">Corporate Information</a>
<a href="https://www.arxnimbus.com/contact">Contact Us</a>
</div>
</li>
</ul>
</div>

 

CSS:

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");
}
}

 

Any help would be greatly appreciated!

0 Avaliação positiva
1 Resposta 1
sharonlicari
Gerente da Comunidade
Gerente da Comunidade

Responsive Header with Dropdown Navbar

Hey @SophiaAN     

 

I apologize for the delay in getting back to you. I am wondering if you were able to resolve this or if you still need assistance on this matter?     

 

Thank you

Sharon


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Avaliação positiva