Navigation/hamburger icon disappear when page link is clicked once - javascript

I'm designing a one-page scrolling website. When I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), the hamburger icon disappears. I can't get it back unless I refresh the page. The nav bar also disappears at full screen width after clicking on a page link once. I would like to keep the hamburger icon and the top navigation in view at all times. The javascript I'm using to collapse the full-screen menu that shows up at 780px is causing this problem, but I need it, or the menu will not disappear when a link is clicked. Thank you to anyone who can help!
$(document).ready(function() {
$('a').click(function() {
$('#menu').slideToggle();
});
});
#media screen and (max-width: 780px) {
nav {
width: 100%;
margin: 0;
padding: 0;
position: relative;
left: 0;
display: block;
opacity: 1.0 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
nav ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: none;
float: none;
}
nav ul li {
font-size: 1.3em;
font-weight: normal;
line-height: 40px;
width: 100% !important;
margin: 0;
padding: 0;
}
nav ul li:nth-of-type(1) { margin-top: 20%; }
nav ul li:hover { background: #565758; }
nav ul li a {
color: white !important;
font-family: "Lato", sans-serif;
border-bottom: none !important;
display: inline-block;
}
nav ul li a.active-link {
color: white !important;
font-size: 1.3em;
}
nav ul li a:hover {
color: white;
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
margin: 0 !important;
padding: 1em !important;
text-align: right;
display: block;
float: right;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}​
<header>
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>​

You need to add the toggle to the checkbox as well. It is an jQuery function, that uses specific animations and styles.
$('#show-menu').click(function() {
$('#menu').slideToggle();
});
EDIT
I added a working example. I did not used the toggle here, for a better design. Now the menu also toggels with the click on the checkbox :-)
$(document).ready(function() {
$('a').click(function() {
$('#menu').slideToggle();
});
$('#show-menu').change(function() {
if(this.checked)
$('#menu').slideDown();
else
$('#menu').slideUp();
});
});
#media screen and (max-width: 780px) {
nav {
width: 100%;
margin: 0;
padding: 0;
position: relative;
left: 0;
display: block;
opacity: 1.0 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
nav ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: none;
float: none;
}
nav ul li {
font-size: 1.3em;
font-weight: normal;
line-height: 40px;
width: 100% !important;
margin: 0;
padding: 0;
}
nav ul li:nth-of-type(1) { margin-top: 20%; }
nav ul li:hover { background: #565758; }
nav ul li a {
color: white !important;
font-family: "Lato", sans-serif;
border-bottom: none !important;
display: inline-block;
}
nav ul li a.active-link {
color: white !important;
font-size: 1.3em;
}
nav ul li a:hover {
color: white;
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
margin: 0 !important;
padding: 1em !important;
text-align: right;
display: block;
float: right;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>​

Related

Prevent sub-menu from moving down

I created a navbar using CSS and HTML. To that, I have added a sub-menu that opens when hovered over elements of "nav-list". I want the position of the sub-menu to be fixed since I want it to be one place irrespective of which element is hovered. The problem is I used sticky to fix the position of the navbar too. And when I scroll down while the submenu is open, it moves down too. How do I stop this?
<ul class="nav-list" >
<li>
Category
<ul class="sub-menu" id="sub-menu">
<li>shirts </li>
<li>Shorts</li>
</ul>
</li>
<li>
Ultra
<ul class="sub-menu">
<li>shirts </li>
<li>Shorts</li>
<li>Accessories</li>
<li>Shoes</li>
</ul>
</li>
</ul>
</nav>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
/*Code for Sticky*/
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .notice{
padding-top: 60px;
}
nav{
display: inline-flex;
width: 100%;
}
.nav-list{
display: flex;
width: 100%;
margin-top: .7rem; /*Use this to change the postition of dropdown*/
padding-left: 1.1rem; /*Use this to move the dropdown left and right*/
}
.nav-list li{
position: relative;
}
.nav-list > li > a{
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition:0.1s color 300ms;
}
.sub-menu {
display: flex;
position:fixed;
box-sizing: border-box;
background-color: black;
visibility:hidden;
top: 1.5rem; /*push up */
left: -2rem;
width: 82.5rem;
height: 35rem;
}
.sub-menu a{
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.sub-menu a:hover{
color: #7e7978;
}
.nav-list li:hover > .sub-menu {
visibility: visible;
opacity: 1;
}

Why is my list not stacking on top of each other?

I have a fixed header menu bar at the top of the webpage. Each of the titles is a link but I want a dropdown for the first link. The link components for the dropdown menu is behaving strangely, see image:
I would like the link components to be stacked on top of each other, like a proper dropdown. Below is my code:
It looks correct when I run the code snippet but when I did these codings in Visual Studio, the codings below looks just like the image.
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
<div className="linkWrapper">
Quicklinks<i class="fa fa-angle-double-down"></i>
</div>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.linkWrapper a:first-child {
display:block;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
remove the float for the submenu items adding
.navlist li div a {
float: none;
}
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist li div a {
float: none;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
UPDATE
Your code snippet already set links to display: block and it works as expected, your issue seems to come from somewhere else, maybe css overrides elsewhere in your project ?
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
ORIGINAL ANSWER
You're using a tags which by default are displayed inline, you could add some styling to your a to display: block or use a list :
Quicklinks<i class="fa fa-angle-double-down"></i>
<ul>
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>
You may want to make this list unstyled to avoid dots.
Also to behave like a proper dropdown, this list should be hidden on first render and you will trigger the visibility with another js function listening on click event on your "Quicklinks" link. Something like :
var button = document.getElementById("dropdownButton");
var menu = document.getElementById("dropdownMenu");
button.addEventListener("click", function(e) {
menu.classList.toggle("hidden");
});
.hidden {
display: none;
}
Quicklinks
<ul id="dropdownMenu" class="hidden">
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>
this is because your css have :
.navlist li {
float: left;
}
just remove it and add to .navlist a
clear: both;
}
complete code :
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/* just example */
.navlist div {
margin-left: 1em;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
/* adding : ( work with -- float: left -- allready present in -- .navbar a -- */
clear: both;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks <i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>

Responsive Navigation Not Showing All Items

Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY
I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}
I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700

Header navbar error

I'm coding a responsive navbar, which turns into a burger menu below a certain width, however when I try to open the dropdown menu, it all jumps back up to the top of the page rather than remaining wherever I am within the page.
Sorry it's quite hard to describe, but do find all the code below and please let me know if you're able to see what the issue is.
Thank you all in advance:
$('#burger_menu').click(function() {
$('header ul').css('display', 'block');
$('header ul').mouseleave(function() {
$('header ul').css('display', 'none');
});
});
header {
width: 100%;
background: #62c2d2;
position: fixed;
top: 0;
z-index: 20;
}
header #logo {
width: 300px;
height: 40px;
margin: 15px;
background: url('../img/new-logo.png')center no-repeat;
background-size: cover;
float: left;
}
header nav {
padding: 10px 15px;
float: right;
}
header nav #burger_menu {
padding-right: 20px;
font-size: 40px;
display: none;
color: #fff;
}
header nav #burger_menu:visited {
color: #fff;
}
header nav #burger_menu:hover {
color: #eee;
}
header nav #burger_menu:active {
color: #fff;
}
header nav ul {
display: block;
}
header nav li {
padding: 10px;
display: inline-block;
float: left;
}
header nav a {
width: fit-content;
font-size: 18px;
color: #fff;
text-decoration: none;
position: relative;
}
#media screen and (max-width: 1023px) {
/* NAV */
header nav #burger_menu {
display: inline-block;
}
header nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 20px 40px;
background: #62c2d2;
right: 0;
top: 80px;
width: 30%;
}
header nav li {
width: 100%;
text-align: center;
padding: 15px;
margin: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<!-- left -->
<!-- right -->
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>
<span class="active">home</span>
</li>
<li>
<span>about</span>
</li>
<li>
<span>careers</span>
</li>
<li>
<span>contact</span>
</li>
</ul>
</nav>
</header>

Navigation bar issue with media queries

When my page is resized for mobile via media queries, I show a menu bar (handle), that allows the user to click and slideToggle the navigation bar, so they can see it.
When I manually resize my page, I notice the following issue:
When I was in mobile view, and the navigation bar was visible, then when I resize it, the nav bar is visible. But, if I close the nav bar in mobile view, and then resize to full screen, my nav bar disappears, and I'm not sure why. I believe there is a problem with my jQuery. Can anyone point me in the right direction?
$(document).ready(function() {
var handle = $(".handle");
var navigation = $(".navigation");
handle.click(function() {
navigation.slideToggle();
});
});
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li:hover {
background-color: #399077;
transition: 0.5s;
}
nav ul li {
display: inline-block;
padding: 20px;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px;
color: white;
display: none;
}
.handle i {
float: right;
cursor: pointer;
}
#media screen and (max-width: 400px) {
nav ul li {
box-sizing: border-box;
width: 100%;
display: block;
padding: 15px;
text-align: left;
box-shadow: 1px 1px #399077;
}
.handle {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
<div class="handle">Menu</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
You need to reset the navigation from hidden to visible after switch back to desktop view, otherwise it will remain hidden if he navigation is hidden. You can do it via resize() function:
$(document).ready(mobileNav);
$(window).on('resize', mobileNav);
function mobileNav() {
var handle = $(".handle");
var navigation = $(".navigation");
if (window.innerWidth <= 400) {
navigation.hide();
} else {
navigation.show();
}
handle.unbind().click(function() {
navigation.slideToggle();
});
}
Also, <a> is not allowed directly under <ul>, so move them into <li>s.
jsFiddle
$(document).ready(mobileNav);
$(window).on('resize', mobileNav);
function mobileNav() {
var handle = $(".handle");
var navigation = $(".navigation");
if (window.innerWidth <= 400) {
navigation.hide();
} else {
navigation.show();
}
handle.unbind().click(function() {
navigation.slideToggle();
});
}
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li:hover {
background-color: #399077;
transition: 0.5s;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 20px;
color: #fff;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px;
color: white;
display: none;
}
.handle i {
float: right;
cursor: pointer;
}
#media screen and (max-width: 400px) {
nav ul li {
box-sizing: border-box;
width: 100%;
display: block;
text-align: left;
box-shadow: 1px 1px #399077;
}
nav ul li a {
padding: 15px;
}
.handle {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
<div class="handle">Menu</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
If you slideToggle the navigation menu once the .handle was clicked - it is now hidden. If you will resize the window (after the navigation is hidden) - it will still be hidden (because you did nothing to show it again).
You can use the resize event to run any other function once the window was resized (note that you will need to check if the resize was to shrink or enlarge the window, then you will need to check if the navigation is visible or not - and then to show it (if it's hidden).

Categories