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
}
Related
I'm working on a project and using a code along to help me understand how to build an Nav Bar. I am using this tutorial: https://www.youtube.com/watch?v=gXkqy0b4M5g
I've haven't gone past 22:05 in the video.
I've built out the HTML, CSS and first JavaScript function which is supposed to show the navbar when you click on the hamburger menu which we've built out of div's. I've built out the function in JavaScript, I am receiving no errors, and everything matches the video to a "T" and looks 100% right but for whatever reason it will not run the function when I click the hamburger menu.
console.log("Hello!");
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
nav .nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #366576;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
nav .nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
I've been at this for over 24 hours now and I cannot for the life of me find anything wrong. Everything is linked and again, I am not seeing any errors. It works exactly like this on the video I was following along with. Anyone have any clue what's going on here?
You can play with the media query and the screen sizes.
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
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.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #504954;
font-family: 'Popins', 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: 30%;
}
.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;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 768px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #504954;
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;
cursor: pointer;
}
}
.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)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Document</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</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>
Looks like the classes line1, line2, and line3 are not defined and the "hamburger" occupies no screen space for you to click. I made .burger visible by:
<div class="burger">
<div class="line1">---</div>
<div class="line2">...</div>
<div class="line3">---</div>
</div>
and added some logging:
burger.addEventListener('click', () => {
console.log(nav.classList[1]);
nav.classList.toggle('nav-active');
console.log(nav.classList[1]);
});
If you click the "hamburger" repeatedly, the console should show alternating undefined and nav-active each time.
I have a home page with a responsive navbar. When you shrink the size of the window, it collapses into a burger for mobile/tablet, which then shows the menu options vertically down the right-hand side of the page.
The home page also has an image slide show that runs automatically that is in the centre of the page.
When the window size reduces i.e to mobile size and it collapses into a burger, I can't see some of the menu options over the image slide show. Any ideas on how to accomplish this? I am a newbie to HTML, CSS & also JS... any help much appreciated (:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/style.css" rel = "stylesheet" type="text/css" >
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300&display=swap" rel="stylesheet">
<script> src="app.js"</script>
<title>Rogue Concept</title>
</head>
<body>
<!-- Navigation Menu Bar-->
<nav>
<div class="logo">
<h4>Rogue Concept</h4>
</div>
<ul class="nav-links">
<li>Home
</li>
<li>
About Us
</li>
<li>
Restoration
</li>
<li>
Hire
</li>
<li>
Contact Us
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!--image slider start-->
<div class="slider">
<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first">
<img src="assets/img/grant-ritchie-j0YPbvXu4t0-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/grant-ritchie-jYk96oRbPwg-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jan-de-keijzer-8eudveAaeFU-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jon-flobrant-lRSChvh1Mhs-unsplash.jpeg" alt="" class="center">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
<!--manual navigation end-->
</div>
<!--image slider end-->
<script src="assets/app.js"></script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* Navigation Tool Bar Start */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: whitesmoke;
font-family: 'Oswald', sans-serif;
}
.logo {
color: black;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
/* Navigation Tool Bar End */
/* Mobile Nav Tool Bar Start */
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color : black;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: whitesmoke;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.nav-active {
transform: translateX(0%);
}
}
/* Mobile Nav Tool Bar End */
/* Animation Start */
#keyframes navLinkFade{
from{
opacity: 0;
transfrom: 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);
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slides {
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 800px;
height: 500px;
}
/*css for manual slide navigation*/
.navigation-manual {
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child) {
margin-right: 40px;
}
.manual-btn:hover {
background: whitesmoke;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}
/*css for automatic navigation*/
.navigation-auto {
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child) {
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
background: whitesmoke;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
background: whitesmoke;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
background: whitesmoke;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
background: whitesmoke;
}
app.js
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();
You can use Z-index in CSS for superimpose elements.
Example:
nav{
z-index: 1000;
}
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.
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.