so I'm having issues with closing my mobile nav hamburger menu when a link is clicked. Only my top link is clickable right now just FYI.
The answer is on the tip of my tongue but I'm not quite there. I think mainly it's a syntax issue on my end. So yes the menu on mobile opens and closes when clicking the menu, but it doesn't close when a link is clicked.
I've looked all over, but all I could find were jQuery answers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css\style.css">
<title>eddiepearsonUX</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>Audio UX Study</li>
<li>Web App UX</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro-section">
<h1 class="name">
<span>eddie</span>
<span>Pearson</span>
</h1>
<h3 class="intro">
<p>Audio<br>and Visual</p>
<p>UX</p>
</h3>
</section>
<h3 class="content-title">
<p>Audio UX Study</p>
</h3>
<ul style="list-style-type: none" id="Audio-UX-Study"class="content">
<li class="main-img"><img src="https://www.dl.dropboxusercontent.com/s/rktj2nhj07l2ne7/20191206-Screenshot%20%28223%29.jpg?dl=0" alt="Ableton screen with wavforms and effects stack"></li>
<li class="second-img"><img src="https://www.dl.dropboxusercontent.com/s/j1aipb71ccj3o64/Screenshot%20%28225%29.png?dl=0" alt="Wavforms from audio"></li>
<li class="copy">
</li>
<li class="main-img"></li>
<li class="second-img"></li>
<li class="copy">
</li>
</ul>
<script src="js\app.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Merriweather', serif;
}
body {
font-family: sans-serif;
background-color: #e6e6e0;
}
/* NAVIGATION */
nav {
height: 10vh;
background: #e6e6e0;
/* position: sticky; */
}
.name-div {
position: absolute;
width: 50%;
top: 1.8rem;
left: 2rem;
}
.name {
color: rgb(82, 82, 56);
font-size: calc(0.2rem + 1.1rem);
}
.nav-links {
display: flex;
position: relative;
list-style: none;
max-width: 75vw;
height: 100%;
justify-content: end;
align-items: center;
margin: auto;
}
.nav-links li a {
color:rgb(82, 82, 56);
font-weight: bold;
text-decoration: none;
font-size: 18px;
padding-left: 1em;
}
#media screen and (max-width: 768px) {
.nav-links {
position: fixed;
background: #e6e6e0;
height: 100vh;
width: 100%;
flex-direction: column;
justify-content: space-around;
margin-left: auto;
clip-path: circle(100px at 90% -20%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1100px at 90% -10%);
-webkit-clip-path: circle(1100px at 90% -10%);
pointer-events: all;
max-width: 95%;
}
.line {
width: 30px;
height: 3px;
background: rgb(82, 82, 56);
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links li {
opacity: 0;
}
.nav-links a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.1s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
}
/* INTRO SECTION */
.intro-section {
max-width: 75vw;
margin: auto;
/* background-color: #fff; */
}
.intro-section .name {
padding: 2rem 0 2rem 0rem;
font-size: calc(0.8rem + 3vw);
}
.intro-section .name span:nth-of-type(1) {
color: rgb(174, 177, 156);
}
.intro {
color:rgb(174, 177, 156);
font-size: calc(0.6rem + 2vw);
}
.intro p:nth-of-type(2) {
font-size: calc(0.6rem + 3vw);
color:rgb(82, 82, 56);
}
/* CONTENT SECTION */
.content-title {
display: block;
margin: auto;
margin-top: 5rem;
margin-bottom: 2rem;
max-width: 75vw;
font-size: calc(0.6rem + 1vw);
color:rgb(82, 82, 56);
}
.content {
max-width: 75vw;
margin: 3rem auto;
display: grid;
width: 100%;
height: auto;
display: grid;
margin-bottom: 3em;
grid-gap: 1em;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.main-img {
grid-column: 1 / 2;
}
.content > li > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
The only thing you're listening for clicks on is the hamburger element.
Try adding a listener on the navLinks element, like so:
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
navLinks.addEventListener('click', () => {
navLinks.classList.toggle('open')
links.forEach(link => {
link.classList.toggle('fade');
});
})
There might be more tweaks you need to make, but this should get you started.
Related
My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>
Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.
Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.
The first html I did was doing fine with its z-index but on the second one, I added sticky nav bar, and now the nav bar isn't showing up when in phone mode.
Here is the comparison:
(sorry for the different sized images)
#navbar {
position: fixed;
top: 0px;
display: flex;
overflow: hidden;
padding: 10px 10px; /* Large padding which will shrink on scroll (using JS) */
transition: 0.4s; /* Adds a transition effect when the padding is decreased */
justify-content: space-around;
align-items: center;
min-height: 8vh;
width: 100%;
background-color: #55426e;
z-index: 4;
}
.sticky{
padding: 5px 10px;
}
.burger {
display: none;
cursor: pointer;
padding: 5px;
z-index: 3;
}
.burger div{
width: 23px;
height: 3px;
background-color: aliceblue;
margin: 5px;
transition: all 0.3s ease;
border-radius:10px;
}
#media screen and (max-width: 1024px) {
.nav-links{
width: 65%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #55426e;
display:flex;
flex-direction:column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display:block;
}
#navbar {
padding: 2px 10px !important;
/* Use !important to make sure that JavaScript
doesn't override the padding on small screens */
}
}
.withpic {
position: relative;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5)), url(aboutme2.JPG);
height: 100vh;
background-size: cover;
background-position: center;
}
.wopic {
position: relative;
background-color: #ddd5e2;
padding-top: 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
}
.under {
position: relative;
z-index: 3;
}
/*sticky nav bar -- from w3schools*/
.overtext {
display: flex;
align-items: flex-end;
flex-direction: column;
color: #ddd5e2;
text-align: center;
position: relative;
z-index: -99;
}
<DOCTYPE! html>
<html>
<head>
<title>Website</title>
<link href="ask.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="withpic">
<nav>
<div id="navbar">
<div id="logo">
<h4>logo</h4>
</div>
<ul class="nav-links">
<li> HOME </li>
<li> ABOUT </li>
<li> PHOTOGRAPHY </li>
<li> ORGANIZER </li>
<li> CONTACT </li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</nav>
<div class="lefty under">
<div class="overtext">
<h1>About Me</h1>
<em>
私について
</em>
</div>
</div>
</div>
<div class="wopic">
<p>section without picture</p>
</div>
<script src="app.js"></script>
<script src="nav.js"></script>
</body>
</html>
//burger javascript
function navSlide() {
let burger = document.querySelector(".burger");
let nav = document.querySelector(".nav-links");
let navLinks = document.querySelectorAll(".nav-links li");
//toggle nav
burger.addEventListener("click", function() {
nav.classList.toggle('nav-active');
//animate links
navLinks.forEach((link, index)=> {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
//sticky nav bar with transitions javascript
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "2px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "25px";
}
}
I deleted some font properties in css to avoid it getting longer. Please tell me if I need to add some more css from my original code.
Here's an updated snippet with the visibility issue fixed. There must be additional css that you didn't include above, but the main idea is here. Click the hamburger menu and the nav bar appears.
Two main problems I saw:
An overflow: hidden on the #nav
No transform: translateX(0) to bring the nav menu into position.
function navSlide() {
let burger = document.querySelector(".burger");
let nav = document.querySelector(".nav-links");
let navLinks = document.querySelectorAll(".nav-links li");
//toggle nav
burger.addEventListener("click", function() {
nav.classList.toggle('nav-active');
//animate links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
//sticky nav bar with transitions javascript
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "2px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "25px";
}
}
:root,
html,
body {
height: 100%;
width: 100%;
}
#navbar {
position: fixed;
top: 0px;
display: flex;
padding: 10px 10px;
/* Large padding which will shrink on scroll (using JS) */
transition: 0.4s;
/* Adds a transition effect when the padding is decreased */
justify-content: space-around;
align-items: center;
min-height: 8vh;
width: 100%;
background-color: #55426e;
z-index: 4;
}
.sticky {
padding: 5px 10px;
}
.burger {
display: none;
cursor: pointer;
padding: 5px;
z-index: 3;
}
.burger div {
width: 23px;
height: 3px;
background-color: aliceblue;
margin: 5px;
transition: all 0.3s ease;
border-radius: 10px;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 65%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #55426e;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.nav-links.nav-active {
transform: translateX(0);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.nav-links.nav-active li,
.nav-links.nav-active li a {
list-style: none;
opacity: 1;
color: white;
text-decoration: none;
}
#navbar {
overflow: visible;
padding: 2px 10px !important;
/* Use !important to make sure that JavaScript
doesn't override the padding on small screens */
}
}
.withpic {
position: relative;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(aboutme2.JPG);
height: 100vh;
background-size: cover;
background-position: center;
}
.wopic {
position: relative;
background-color: #ddd5e2;
padding-top: 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
}
.under {
position: relative;
z-index: 3;
}
/*sticky nav bar -- from w3schools*/
.overtext {
display: flex;
align-items: flex-end;
flex-direction: column;
color: #ddd5e2;
text-align: center;
position: relative;
z-index: -99;
}
<DOCTYPE! html>
<html>
<head>
<title>Website</title>
<link href="ask.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="withpic">
<nav>
<div id="navbar">
<div id="logo">
<h4>logo</h4>
</div>
<ul class="nav-links">
<li> HOME </li>
<li> ABOUT </li>
<li> PHOTOGRAPHY </li>
<li> ORGANIZER </li>
<li> CONTACT </li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</nav>
<div class="lefty under">
<div class="overtext">
<h1>About Me</h1>
<em>
私について
</em>
</div>
</div>
</div>
<div class="wopic">
<p>section without picture</p>
</div>
<script src="app.js"></script>
<script src="nav.js"></script>
</body>
</html>
I would like to add a responsive navigation bar to my blog. I got a video from youtube about responsive navigation bar. But i met with a problem. On 768px the content of navigation menu is not showing. When I inspect with Chrome, those links are already there. But I can't see. I am looking for a solution
Please See this Image When Inspecting those Links are there But they are not visible
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>ATC</title>
</head>
<body>
<nav>
<div class="logo">
<h4>ATC</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Orders</li>
<li>Forms</li>
<li>Act & Rules</li>
<li>Students Corner</li>
<li>Schools Gallery</li>
<li>Useful Links</li>
<li>About</li>
<li>Contact Us</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226,226,226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 90%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226,226,226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226,226,226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1024px) {
.nav-links {
width: 100%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
Javascript
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', ()=>{
//Toggle Nav
nav.classList.toggle('nav-active');
//animate Links
navLinks.forEach((link, index)=> {
if(link.style.animation) {
link.style.animation ='';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards $(index / 7 + 1.5)s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
Please help me to find the solution
If you set an element’s position to absolute, its parent should be set to relative in order for it to appear. You can try setting the position of nav to relative when your screen size is 768px.
Edit:
Remove the following property:
.nav-links li {
opacity: 0;
}
Best of luck.
I've followed a youtube tutorial at [https://www.youtube.com/watch?v=H4MkGzoACpQ] to create a nice responsive Navbar.
The problem is when I try and personalise it and add a logo on the left side of the Nav, it seems to push the other nav links off the navbar when viewed in full screen.
As well as that, when the viewport goes below a certain width, there seems to be a circle visible around the hamburger icon.
Please help me to clean up this Navbar. Many thanks, I'm just a beginner at web design.
Here is a link to what the logo should be also - [https://www.google.com/search?q=rossnowlagh+surf+school+logo&sxsrf=ALeKk00Hg24OG5c7Wefc6jal-JyqLmB18Q:1586961567476&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjxpYHE1OroAhXXiVwKHQi3CEsQ_AUoAXoECAwQAw&biw=1440&bih=789#imgrc=36AEO3-lo_sGxM]
I've included my HTML, CSS and JS code here...
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
nav {
height: 12vh;
background: #5b78c7;
}
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 16px;
}
.landing {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.landing h1 {
margin: 100px;
font-size: 50px;
color: #ae5fce;
}
#media screen and (max-width: 768px) {
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
position: fixed;
background: #5b78c7;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.landing {
flex-direction: column;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
li.fade {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Rossnowlagh Surf</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<img id="nav-logo" src="img/rossnowlagh-logo.png">
<ul class="nav-links">
<li>About</li>
<li>Packages</li>
<li>Contact</li>
</ul>
</nav>
<section class="landing">
<img src="./circles.svg" alt="dots" />
<h1>Dots</h1>
</section>
<script src="app.js"></script>
</body>
</html>
What's happening here is that your nav logo is taking up space, and is pushing things off the screen in a way that is breaking the layout.
There are probably a few ways to address this, including using a flexbox and arranging the items for your nav inside it, but I think that the following option is probably going to be the simplest for your task:
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
position: absolute; // add this to take the logo out of the layout
z-index: 5; // add this to keep the logo in front of the other content
}
The webpage, when in mobile view, is getting stuck when I attempt to scroll vertically. In #media screen and (max-width: 952px) {} I have overflow-x: hidden;, width: 100%;, and position: absolute; set in order to prevent horizontal scrolling because the mobile nav bar is hidden to the right. I've attempted to add overflow-y: scroll; and overflow-y: auto; to the code and even added !important and I am still experience vertical scroll issues.
You can view a live version of the webpage at jacpel5.dreamhosters.com
HTML for the 'Photography' page:
<!DOCTYPE html>
<html>
<head>
<title>Jacki Leigh - Photography</title>
<!-- title appears in browser tab -->
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
<!-- linking to myStyleSheet.css file for styling -->
<link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
<!-- font family "Operetta 8" -->
<link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
<!-- font family "Relation Two" -->
<link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
<!-- linking to the favicon -->
<meta charset="UTF-8">
<!-- UTF-8 is the default character set for HTML5 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
<!-- width=device-width sets the width of the page to follow the screen-width of the device --->
<!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
<meta name="robots" content="index, follow">
<!-- allows the spider of a search engine to index the whole website -->
<meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
<meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
<!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
<meta name="author" content="Jacki Leigh Designs">
</head>
<body>
<header>
<div class="container">
<a href="index.html">
<img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo">
</a>
<nav>
<ul class="nav-links">
<!-- <li>Home</li> -->
<li>Photography</li>
<li>Graphic Design</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>
<br />
<div class="section">
<ul class="grid">
<li>
<div class="box p-cov1">
<a href="concert-photography.html">
<div class="info">
<h3>Concert Photography</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov2">
<a href="light-painting.html">
<div class="info">
<h3>Light Painting</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov3">
<a href="portraits-people.html">
<div class="info">
<h3>Portraits & People</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov4">
<a href="nature.html">
<div class="info">
<h3>Nature</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov5">
<a href="animals.html">
<div class="info">
<h3>Animals</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov6">
<a href="special-events.html">
<div class="info">
<h3>Special Events</h3>
</div></a>
</div>
</li>
</ul>
</div>
<br />
<br />
<footer>
<a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank">
<img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon">
</a>
<a href="https://www.instagram.com/jacki_leigh/" target="_blank">
<img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon">
</a>
<br />
<small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small>
</style>
</footer>
<script src="javascript/app.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #FCFCFC;
font-family: "operetta 8", serif;
font-weight: 300;
font-style: normal;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
}
.container { /* logo and text/links in navigation bar */
width: 90%;
margin: 0 auto;
}
.headerLogo { /* logo in navigation bar */
/* floating logo to the left */
/* full canvas photo is 2057px wide & 643px in height */
float: left;
padding: 10px 0; /* gives a little space on top and bottom of the logo */
width: 164.56px; /* 8% of the full size (2057px) */
height: 51.44px; /* 8% of the full size (643px) */
}
header {
background: #E9E9E9;
opacity: 1;
}
header::after {
/* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
content: '';
display: table;
clear: both;
}
nav {
/* floating list (menu) items to the right */
float: right;
}
nav ul {
margin: 0; /* takes space off top and bottom header background */
padding: 0; /* takes space off the sides */
list-style: none; /* removes bullet point styling */
}
nav li {
display: inline-block; /* places list horizontal, not vertical */
margin-left: 30px; /* specifies the spacd between the list items */
padding-top: 25px; /* not required - used for the hover effect for this particular nav bar */
position: relative; /* allows the nav a::before to keep the hover line relative to the text length */
}
nav ul li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
nav ul li a:hover {
color: #3f003c;
}
nav ul li a::before {
content: '';
display: block;
height: 2px;
width: 100%;
background-color: #3f003c;
position: absolute; /* absolute width 100% shoots this to 100% of the screen size (they run together) */
top: 0;
width: 0%;
transition: all ease-in-out 250ms; /* slows down the way the hover bar appears */
}
nav ul li a:hover::before {
width: 100%;
}
a {
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
display: static;
z-index: 200;
}
.burger div {
width: 25px;
height: 3px;
background-color: #3f003c;
margin: 5px;
transition: all 0.5s ease; /* adds transition to Burger turning into an X */
}
.mainLogo {
/* class for logo/image on index page */
width: 75%;
height: 60%;
opacity: 0.9;
}
.mainLogoDiv {
/* class for the div containing the logo/image on index page */
text-align: center;
}
.section {
max-width: 1920px;
margin: 0 auto;
padding: 1% 2%;
}
.grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.grid:after {
clear: both;
}
.grid:after, .grid:before {
content: '';
display: table;
}
.grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 20px;
}
.box {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
border-radius: 5px;
-webkit-transition: 0.3s ease-in-out,
-webkit-transform 0.3 ease-in-out;
-moz-transition: 0.3s ease-in-out,
-moz-transform 0.3 ease-in-out;
transition: 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.05);
}
.p-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/mj-cover.jpg);
}
.p-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/lp-cover.jpg);
}
.p-cov3 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/pp-cover.jpg);
}
.p-cov4 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/la-cover.jpg);
}
.p-cov5 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/an-cover.jpg);
}
.p-cov6 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/se-cover.jpg);
}
.g-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/dc-cover.jpg);
}
.g-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/ww-cover.jpg);
}
.info {
position: absolute;
width: 100%;
height: 100%;
}
.info h3 {
font-family: "Operetta 8", serif;
font-weight: 400;
color: #e0e0e0;
text-shadow: 1px 1px black;
font-size: 20px;
margin: 0 auto;
padding: 85px 0px 0 0px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.photoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
grid-gap: 5px 5px;
width: 90%;
margin: auto;
}
.photoColumn {
display: block;
}
.contact {
margin: 0 auto;
}
.contact-me {
text-align: center;
}
.contact-me img {
width: 60%;
max-width: 450px;
padding: 10px 0 20px 0;
}
form {
text-align: left;
font-size: 13.5px;
padding: 0px 20px 20px 20px; /* gives space on all text contained within border */
margin: 0 auto;
line-height: 30px;
height: 80%;
width: 70%;
max-width: 500px;
overflow: auto;
text-transform: uppercase;
color: #3f003c;
}
input[type=submit] {
background-color: #3f003c;
color: #E9E9E9;
border-radius: 5px;
height: 35px;
width: 100px;
font-size: 15px;
text-transform: uppercase;
}
/* the below syntax removes the blue border in the input boxes when selected */
input:focus, textarea:focus, select:focus {
outline-offset: 0px !important;
outline: none !important;
}
/* the two syntaxes below change the color of highlighted text */
::selection {
background: #E9E9E9; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #E9E9E9; /* Gecko Browsers */
}
/* the below set of syntaxes removes the background color when autofill is used */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
#name {
height: 30px;
width: 100%;
}
#email {
height: 30px;
width: 100%;
}
#message {
height: 60px;
width: 100%;
}
footer {
color: #7F7887;
text-align: center;
text-decoration: none;
}
.fbIcon {
/* class for the facebook icon in the footer */
padding: 0 2px 8px 0;
width: 25px;
height: 25px;
opacity: .7;
}
.instaIcon {
/* class for the instagram icon in the footer */
padding: 0 0 8px 0;
width: 25px;
height: 25px;
opacity: 0.7;
}
#media screen and (max-width: 952px) {
.nav-links {
position: absolute;
right: 0px;
height: 100%;
top: 70px;
background-color: #E9E9E9;
opacity: .95;
display: flex;
flex-direction: column;
align-items: center;
width: 35%;
transform: translateX(100vw);
transition: transform 0.5s ease-in;
z-index: 100;
}
.nav-links li {
margin-left: 0px;
opacity: 0;
padding: 45px 0px 0px 0px;
}
.nav-links li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav-links li a:hover {
color: #3f003c;
}
nav ul li a::before {
display: none;
}
.burger {
display: block;
padding: 20px;
z-index: 150;
position: static;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */
/* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
/* this takes the middle hamburger line and turns it to 0 opacity */
.toggle .line2 {
opacity: 0;
}
/* this takes the bottom hamburger line and turns it 45 degrees to form the second part of the X */
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JavaScript:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
I think your problem is that you're targeting both the html and body elements with your scroll settings #media screen and (max-width: 952px) - this causes a scroll within a scroll effect, which can be buggy in mobile views.
I was able to fix this in the inspector by removing html moving the body styles outside of the media query and changing the transform line in the .nav-links styles from 100% to 100vw. They should work the same in this scenario but vw (viewport width) seems to work better.
body {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
#media screen and (max-width: 952px) {
.nav-links {
transform: translateX(100vw);
}
}