I am trying to build a responsive navigation menu for my website. However, it should also stick to the top when you scroll further down the page. This works fine on the normal 'desktop-size' menu, but when I expand the list items in the responsive navigation menu, the whole menu re-positions itself back to the top.
let navbar = document.querySelector("nav");
let offset = navbar.offsetTop;
// Makes the menu sticky
function stick() {
if (window.pageYOffset >= offset) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
// Makes the menu responsive
function collapse() {
if (navbar.className === "responsive") {
navbar.classList.remove("responsive");
} else {
navbar.classList.add("responsive")
}
}
My JSFiddle: https://jsfiddle.net/MihkelPajunen/t37g6hsc/
Question: Is there a way to make the responsive navigation menu sticky, so that the menu is accessible at the top of the page, even when you scroll further down the page?
Remove the following rule:
nav.responsive {
position: relative;
}
As this is overriding the position: fixed rule.
Also, change the collapse function like so:
if (navbar.className.indexOf("responsive") >=0 ) {
As the class name will actually be something like "responsive sticky"
Here's a fork of that fiddle
Try To use this one instead of yours
<!DOCTYPE html>
<html>
<head>
<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>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Related
I am stuck with a conflict for a "Sticky" and "Responsive" top menu.
When it is not scrolled and I click the BARS button to open the menu (in responsive state) it works ok. If I am scrolled down and the menu is "STICKY" it lost it "position:fixed" and goes all on top (back to position:relative).
Here is my codepen :
codepen for top navigation script conflict
// Function that expand the top menu when collapsed (responsive)
function opennav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
{x.className += " responsive";}
else
{x.className = "topnav";}}
// This is the function that stick the menu when scrolling
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction() {
if
(window.pageYOffset >= sticky)
{navbar.classList.add("sticky");}
else
{navbar.classList.remove("sticky");}
}
body { margin: 0; font-family: Arial, Helvetica, sans-serif;}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
/* Responsive CSS for the top navigation menu */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Sticky CLASS that will be added when scrolling */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="opennav()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<!-- Put large text in this <p> to scroll -->
<p>LOREM IPSUM</p>
</div>
</body>
First, don't use float. We are not leaving in 1995. Go with flexbox or grid.
Second, your code is all over the place. Multiple script tags in HTML section, the multiple usages of the same media query... It's difficult to read your code.
Third, what you want to do can be done just by using CSS. You only need JS to open submenu. To do that just add a class.
I suggest you watch a Youtube video about the responsive menu.
I am a newbie in Javascript coding. I wanted to do a mobile menu where if I click outside of the menu - the menu will disappear. I have done it successfully.
Now the problem is when I am clicking on the hamburger icon, the menu is not expanding. But when I am clicking on its parent element, it's working fine.
What's wrong in my Javascript code?
My code below
<!DOCTYPE html>
<html>
<head>
<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>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav" >
Home
about Us
Address
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var disappear = document.getElementById('myTopnav');
window.onclick = function(event) {
if (event.target.parentNode !== disappear){
disappear.className = "topnav";
}
}
</script>
</body>
</html>
The problem here is
if (event.target.parentNode !== disappear ){
disappear.className = "topnav";
}
when you are clicking on the icon( i tag) the parent node is the anchor tag. so its true. I have changed the code to below. And this should work for your example, also check the whole code snippet below
if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear)
<!DOCTYPE html>
<html>
<head>
<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>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav" >
Home
about Us
Address
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var disappear = document.getElementById('myTopnav');
window.onclick = function(event) {
if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear){
disappear.className = "topnav";
}
}
</script>
</body>
</html>
I'm trying to add a dropdown menu to the mobile version of my site, but it doesn't seem to be working (I'm very new to web design).
The dropdown menu is correctly shown by clicking on the correspondent icon; the problem is that it is also shown by clicking at any point of the topnav menu. I just want the dropdown menu to appear only by clicking on the dropdown menu icon. Moreover, I'd the dropdown menu to disappear by clicking at any point outside of it. This is my code:
<!DOCTYPE html>
<html>
<head>
<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>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
Floor Plan
Address
Project Overview
Location Advantage
Download
Similar Projects
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
let topnav = document.querySelector("#myTopnav");
topnav.onclick = function() {
this.classList.toggle('responsive');
}
</script>
</body>
</html>
Here you can try my code.
Hope you guys will help me.
You can check this answer. I have done the first part and another person helped me to do the second part.
Code below-
<!DOCTYPE html>
<html>
<head>
<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>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav" >
Home
about Us
Address
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var disappear = document.getElementById('myTopnav');
window.onclick = function(event) {
if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear){
disappear.className = "topnav";
}
}
</script>
</body>
</html>
I am a CSS beginner, so far using css only to change colours and size, while copying and pasting for things like JavaScript. Thus I am trying to adjust an responsive navigation bar from w3schools.com that generally looks what I require.
My problem is when the screen width is reduced to mobile width, the result, as well as the three lines (hamburger), there is also the word 'Home' rather than just the three lines. The code I've used comes from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav, while my test page is at
https://www.abelard.org/mobile/test1.php.
It looked to me as if the code section
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
It appeared to me to be the relevant area controlling the nav bar display, my alteration removing the line .topnav a:not(:first-child) {display: none;} makes no difference. I cannot see where else might help.
html...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img src="/library/menu-burger-grn.png">
</a>
</div>
<div style="padding-left:16px">
<h2>test page for nav bar</h2>
<p>First step</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
style.css...
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px)
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
Ok, I've got a tab bar to scroll using touch swipe function and on a desktop to scroll and click
(for some reason when I add code into codepen the java code does not work, not sure why) it works when loaded on to my server
Sample attached: http://www.tcdesignstamford.co.uk
At the moment when you scroll/swipe to the next tab when the screen size is to small you cannot see which tab bar is being selected.
Is there a way to get the selected tab bar title at the top to centre so it does not go off screen??
[codepen code][2]
Hope you can help?
https://codepen.io/tim-cross-the-encoder/pen/wZLvmy
Thanks
Tim
Try to use the bootstrap library, and create a responsive navigation menu:
try to open this code snippet in responsive view, this will be collapsed:
and if you still want to use your own navigation menu, then you have to change design structure of HTML, there are a lot of errors, I just watched your HTML structure from URL link you provided.
if still want to your own navigation menu, let me know, I will create one!
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<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>
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>