Answered
Can't Achieve Sticky-Resonsive-Dropdown Top Menu
I am trying to create a top navbar that is
- Responsive (goes to a hamburger)
- Has drop down buttons
- Is sticky (header panel scrolls up but menu stays at top of screen)
I have a menu that is drop-down and responsive (see code below). For stickiness, I have tried the method shown by W3Schools at: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
But the drop-downs don't work properly in either full-width or mobile (burger) mode. Help in achieving the desired result with HTML, CSS and JS would be much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- -------- COMMON TAGS---------------- -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!-- -->
<style>
/* */
/* */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%% RESPONSIVE DROPDOWN MENU */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%% REQUIRES JAVASCRIPT FOR RESPONSIVE */
/* */
/* */
/* NB: Margins: T-R-B-L, T-RL-B, TB-RL, TRBL */
/* */
.topnav {
overflow: hidden;
background-color: rgb(63, 100, 56);
/* background-image: url("../images/back_dkgreen.gif"); */
/* background-color: black; */
}
.botnav {
overflow: hidden;
background-color: rgb(63, 100, 56);
/* background-image: url("../images/back_dkgreen.gif"); */
/* background-color: black; */
}
.botnav a {
float: left;
display: block;
min-width: 15%;
font-family: "Times New Roman", Times, serif;
color: yellow;
text-align: center;
padding: 10px 15px;
text-decoration: none;
font-size: 17px;
/* border: 1px solid black; */
border-right: 1px solid grey;
}
.topnav a {
float: left;
display: block;
min-width: 80px;
font-family: "Times New Roman", Times, serif;
color: yellow;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
line-height: 20px;
border-right: 1px solid grey;
}
.flagnav {
height: 25px;
width: auto;
padding: 0;
margin-top: 5px;
}
/* --------------------- 1-LINE ITEM AMONG 2-LINE ITEMS */
.oneline a {
padding: 17px 15px;
}
.active {
background-color: black;
color: red;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
font-family: "Times New Roman", Times, serif;
}
.dropdown .dropbtn {
font-size: 17px;
line-height: 20px;
border: none;
outline: none;
color: yellow;
padding: 7px 15px;
/* padding: 16px 16px; */
background-color: inherit;
font-family: inherit;
border-right: 1px solid grey;
margin: 0;
}
.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;
}
.dropdown-content a {
float: none;
color: yellow;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: rgb(52, 0, 194);
color: yellow;
}
.dropdown-content a:hover {
background-color: rgb(52, 0, 194);
color: yellow;
}
.dropdown:hover .dropdown-content {
background-color: black;
color: yellow;
display: block;
}
/* mmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 650px */
@media screen and (max-width: 650px) {
.topnav a,
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
color: white;
font-weight: bold;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
border-bottom: 1px solid whitesmoke;
}
}
/* mmmmmmmmmmmmmmmmmmmmmmmmm (Media-End) */
/* */
</style>
</head>
<!-- <body> -->
<body>
<!-- -->
<!-- %%%%%%%%%%%%%%%%%%%%%%%%%% HEADER PANEL -->
<div style="width: 100%; height: 100px; background-color: chartreuse">
<br />
HEADER PANEL
</div>
<!-- -->
<!-- %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% MENU -->
<!-- -->
<div class="topnav" id="myTopnav">
<a class="active" style="padding: 17px 15px" href="index.html">
Home
</a>
<!-- -->
<a href="thesuites.html">
The
<br />
Suites
</a>
<a href="aboutus.html">
About
<br />
Us
</a>
<div class="dropdown">
<button class="dropbtn">
About
<br />
San Cristóbal
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="whysancristobal.html">Why San Cristóbal?</a>
<a href="gettinghere.html">
Getting Here &
<br />
Getting Around
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">
Activities &
<br />
Attractions
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="sightseeing.html">Sightseeing</a>
<a href="wildlife.html">Wildlife</a>
<a href="dive-snorkel.html">Dive & Snorkel</a>
<a href="fishing.html">Fishing</a>
<a href="surfing.html">Surfing</a>
<a href="moretoenjoy.html">More...</a>
</div>
</div>
<a href="rates-policies.html">
Rates &
<br />
Policies
</a>
<a
href="javascript:void(0);"
style="font-size: 15px"
class="icon"
onclick="nav3Function()"
>
Menu ☰
</a>
</div>
<script>
function nav3Function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- -->
<!-- END OF HEADER SECTION -->
<!-- -->
<div style="width: 100%; height: 1200px; background-color: lightgray">
<br />
CONTENT
</div>
<!-- END OF FOOTER -->
</body>
</html>
Thanks in advance,
Sean
AdChoices