I have this code(below) that makes a hamburger icon on mobile devices and when the user click it a wave appears and cover everything on the screen.
but i have a problem that the wave can't cover the Brand
My question is how to make the Brand disappears under the wave?
Or
How to make the space below the Brand and the hamburger icon disappears under the wave?
This is my code: https://codepen.io/Sinano/pen/MWyprpM
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;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#nav-bar {
display: flex;
justify-content: space-between;
height: 9vh;
background: #dfdb14!important;
padding-top: 1rem;
}
#brand {
padding-top: 0.5rem;
padding-left: 4rem;
}
.nav-links {
display: flex;
list-style: none;
width: 40%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
margin-right: 2rem;
}
.items {
color: white;
text-decoration: none;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
#media screen and (max-width: 768px) {
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
#brand {
padding-top: 0.5rem;
padding-left: 0;
}
#nav-bar {
position: relative;
padding-top: 0;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
background: #5b78c7;
height: 94.8vh;
width: 100%;
margin-right: 0;
flex-direction: column;
clip-path: circle(100px at 100% -18%);
-webkit-clip-path: circle(100px at 100% -18%);
transition: all 2s 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;
}
.menu {
opacity: 0;
}
.items {
font-size: 20px;
}
.menu:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.menu:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.menu:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
.menu:nth-child(4) {
transition: all 0.5s ease 0.8s;
}
.menu:nth-child(5) {
transition: all 0.5s ease 1s;
}
.menu.fade {
opacity: 1;
}
}
.s1 {
height: 90vh;
width: 100%;
background: white!important;
overflow: hidden;
}
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
<link rel="stylesheet" href="css.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<nav id="nav-bar">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<h3 id="brand">BRAND</h3>
<ul class="nav-links">
<li class="menu"><a class="items" href="#">Home</a></li>
<li class="menu"><a class="items" href="#">Publisher Rates</a></li>
<li class="menu"><a class="items" href="#">Create Account</a></li>
<li class="menu"><a class="items" href="#">Login</a></li>
</ul>
</nav>
<section class="s1">
</section>
</body>
Try to add this css. It positions it absolutely above the brand text.
#media screen and (max-width: 768px){
.nav-links{
position: absolute;
}
Related
I am trying to figure out how to stop the image from moving/scrolling up before it reached the nav bar using javascript and css. but it still can scroll down.
I will really appreciate any help in advance thank you.
I attached the image of the desire output
My code is below
https://codesandbox.io/s/html-css-navbar-forked-06mjm0?file=/src/styles.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Bar</title>
<link rel="stylesheet" href="../src/styles.css" />
</head>
<body>
<nav>
<div class="logo">
Brand name
</div>
<div class="menuIcon">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li class="nav-item active">Home</li>
<li class="nav-item">Services</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<div class="mainSec">
<div id="animatedDiv"></div>
</div>
<script src="src/index.js"></script>
</body>
</html>
index.js
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
50 - (scrollVal * 100) / 1500 <= 10
? (aDiv.style.width = "10%")
: (aDiv.style.width = 50 - (scrollVal * 100) / 1500 + "%");
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
const menuIcon = document.querySelector(".menuIcon");
const menuIcons = document.querySelectorAll(".menuIcon .line");
const navLinks = document.querySelector(".nav-links");
const items = document.querySelectorAll(".nav-links li");
const logo = document.querySelector(".logo");
menuIcon.addEventListener("click", () => {
navLinks.classList.toggle("open");
logo.classList.toggle("close");
items.forEach((item) => {
item.classList.toggle("fade");
});
menuIcons.forEach((Icon) => {
Icon.classList.toggle("open");
});
});
const menu = document.querySelector(".nav-links");
const menuItems = document.querySelectorAll(".nav-links li");
menuItems.forEach((item) => {
item.addEventListener("click", function () {
menu.querySelector(".active").classList.remove("active");
item.classList.add("active");
});
});
style.css
.mainSec {
width: 100%;
display: flex;
justify-content: center;
}
#animatedDiv {
background: url("https://media.tenor.com/images/34b16b199449136a845ea0300ff2cef3/raw")
no-repeat;
min-height: 200vh;
width: 50%;
position: absolute;
margin-top: 20%;
}
#secondPage {
background: url("https://www.downloadclipart.net/large/doraemon-png-free-download.png")
no-repeat;
display: block;
width: 50%;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
position: fixed;
height: 10vh;
background-color: rgb(12, 77, 151);
display: flex;
align-items: center;
width: 100%;
}
nav .logo a {
color: white;
font-size: 1.5rem;
text-decoration: none;
display: flex;
text-align: center;
margin: 0px 10px;
}
nav .nav-links {
list-style: none;
margin-left: auto;
}
.nav-links li {
display: inline-block;
}
.nav-links .active {
background-color: black;
border: 2px solid black;
border-radius: 10px;
}
nav .nav-links li a {
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
padding: 0px 10px;
}
#media screen and (max-width: 768px) {
nav {
position: relative;
display: block;
}
.logo {
height: 10vh;
display: flex;
align-items: center;
}
.logo a {
text-align: center;
}
nav .menuIcon {
position: absolute;
cursor: pointer;
top: 30%;
right: 5%;
}
nav .menuIcon .line {
width: 30px;
margin: 5px 0px;
height: 3px;
background-color: white;
position: relative;
}
nav .menuIcon .line:nth-child(1).open {
transform: rotate(45deg);
width: 40px;
height: 5px;
left: 0px;
top: 16px;
transition: all 1s ease;
}
nav .menuIcon .line:nth-child(2).open {
opacity: 0;
}
nav .menuIcon .line:nth-child(3).open {
transform: rotate(-45deg);
width: 40px;
height: 5px;
transition: all 1s ease;
}
nav .nav-links {
margin-top: -10px;
padding: 0px;
height: 90vh;
width: 100%;
background-color: rgb(12, 77, 151);
display: flex;
align-items: center;
flex-direction: column;
clip-path: circle(50px at 90% -10%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
}
.nav-links li {
margin: 40px 0px;
}
nav .nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
}
.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;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.8s;
}
li.fade {
opacity: 1;
}
.logo.close {
visibility: hidden;
}
}
Min Height of #animatedDiv should be set to 87vh instead of 200vh it worked for me. No need to change the JS. See output:
visit
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
50 - (scrollVal * 100) / 1500 <= 10 ?
(aDiv.style.width = "10%") :
(aDiv.style.width = 50 - (scrollVal * 100) / 1500 + "%");
}
window.addEventListener(
"scroll",
function() {
requestAnimationFrame(changeWidth);
},
false
);
const menuIcon = document.querySelector(".menuIcon");
const menuIcons = document.querySelectorAll(".menuIcon .line");
const navLinks = document.querySelector(".nav-links");
const items = document.querySelectorAll(".nav-links li");
const logo = document.querySelector(".logo");
menuIcon.addEventListener("click", () => {
navLinks.classList.toggle("open");
logo.classList.toggle("close");
items.forEach((item) => {
item.classList.toggle("fade");
});
menuIcons.forEach((Icon) => {
Icon.classList.toggle("open");
});
});
const menu = document.querySelector(".nav-links");
const menuItems = document.querySelectorAll(".nav-links li");
menuItems.forEach((item) => {
item.addEventListener("click", function() {
menu.querySelector(".active").classList.remove("active");
item.classList.add("active");
});
});
.mainSec {
width: 100%;
display: flex;
justify-content: center;
}
#animatedDiv {
background: url("https://media.tenor.com/images/34b16b199449136a845ea0300ff2cef3/raw") no-repeat;
display: block;
min-height: 87vh;
width: 50%;
position: absolute;
margin-top: 25%;
z-index: 4;
}
#secondPage {
background: url("https://www.downloadclipart.net/large/doraemon-png-free-download.png") no-repeat;
display: block;
width: 50%;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
position: fixed;
height: 10vh;
background-color: rgb(12, 77, 151);
display: flex;
align-items: center;
width: 100%;
z-index: 6;
}
nav .logo a {
color: white;
font-size: 1.5rem;
text-decoration: none;
display: flex;
text-align: center;
margin: 0px 10px;
}
nav .nav-links {
list-style: none;
margin-left: auto;
}
.nav-links li {
display: inline-block;
}
.nav-links .active {
background-color: black;
border: 2px solid black;
border-radius: 10px;
}
nav .nav-links li a {
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
padding: 0px 10px;
}
/*responsive*/
#media screen and (max-width: 768px) {
nav {
position: relative;
display: block;
}
.logo {
height: 10vh;
display: flex;
align-items: center;
}
.logo a {
text-align: center;
}
nav .menuIcon {
position: absolute;
cursor: pointer;
top: 30%;
right: 5%;
}
nav .menuIcon .line {
width: 30px;
margin: 5px 0px;
height: 3px;
background-color: white;
position: relative;
}
nav .menuIcon .line:nth-child(1).open {
transform: rotate(45deg);
width: 40px;
height: 5px;
left: 0px;
top: 16px;
transition: all 1s ease;
}
nav .menuIcon .line:nth-child(2).open {
opacity: 0;
}
nav .menuIcon .line:nth-child(3).open {
transform: rotate(-45deg);
width: 40px;
height: 5px;
transition: all 1s ease;
}
nav .nav-links {
margin-top: -10px;
padding: 0px;
height: 90vh;
width: 100%;
background-color: rgb(12, 77, 151);
display: flex;
align-items: center;
flex-direction: column;
clip-path: circle(50px at 90% -10%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
}
.nav-links li {
margin: 40px 0px;
}
nav .nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
}
.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;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.8s;
}
li.fade {
opacity: 1;
}
.logo.close {
visibility: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Bar</title>
<link rel="stylesheet" href="../src/styles.css" />
</head>
<body>
<nav>
<div class="logo">
Brand name
</div>
<div class="menuIcon">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li class="nav-item active">Home</li>
<li class="nav-item">Services</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<div class="mainSec">
<div id="animatedDiv"></div>
</div>
<script src="src/index.js"></script>
</body>
</html>
It would be best if you changed the CSS for responsiveness.
I am trying to make my nav bar menu responsive.
I tried to implement it through several ways but the burger button I am not able to click on it.
I start to think maybe I need to like a jquery link or make sure of the node in my machine .
This is the HTML :
<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>Showpra</title> </head> <body>
<nav class="main-nav">
<div class="logo">Nav</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Connect</li>
</ul>
<div class="burger">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
</nav>
<scrip src="script.js"></scrip>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> </body> </html>
This is the CSS :
#import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #444;
font-family: 'Muli', sans-serif;
}
.logo
{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
background-color: coral;
justify-content: space-around;
width: 30%
}
.nav-links li {
list-style: none;
}
.nav-links a{
color:cyan;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width:25px;
height: 5px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:768px){
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 50%;
height: 92vh;
top: 8vh;
background-color: coral;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 10;
}
.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) traslate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) traslate(-5px, 6px);
}
This is the javaScript :
document.addEventListener('DOMContentLoaded', nav)
function nav(){
const burger = document.querySelector('.burger');
const nav = document.querySelector('.main-nav');
burger.addEventListener('click', ()=>{
nav.classList.toggle('show')
})
}
What do you think is the problem
change your js to click once, the menu show , double click and it hides
function nav() {
var x = document.getElementById("burger");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
you can check a detailed article about responsive hamburger menu in
https://learnjsx.com/category/1/posts/responsive-css-import
The DOMContentLoaded event has probably already fired before the listener is attached. If you don't want to use the onclick attribute, the best practice to check for document.readyState as in the example below. Also, FYI you don't have a show class in your css, so the code below toggles, the class, but the class doesn't actually do anything.
if (document.readyState !== 'loading') {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.main-nav');
burger.addEventListener('click', () => {
nav.classList.toggle('show')
})
}
#import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #444;
font-family: 'Muli', sans-serif;
}
.logo {
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
background-color: coral;
justify-content: space-around;
width: 30%
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: cyan;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 5px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 50%;
height: 92vh;
top: 8vh;
background-color: coral;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 10;
}
.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) traslate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) traslate(-5px, 6px);
}
<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>Showpra</title>
</head>
<body>
<nav class="main-nav">
<div class="logo">Nav</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Connect</li>
</ul>
<button onclick="toggleNav">Click</button>
<div class="burger">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
</nav>
<scrip src="script.js"></scrip>
#import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #444;
font-family: 'Muli', sans-serif;
}
.logo
{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
background-color: coral;
justify-content: space-around;
width: 30%
}
.nav-links li {
list-style: none;
}
.nav-links a{
color:cyan;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width:25px;
height: 5px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:768px){
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 50%;
height: 92vh;
top: 8vh;
background-color: coral;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 10;
}
.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) traslate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) traslate(-5px, 6px);
}
#hamburger {
font-size: 36px;
color: #eee;
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<title>Showpra</title>
<body>
<nav class="main-nav">
<div class="logo">Nav</div>
<div id="hamburger" class="fa fa-bars" onclick="nav()"> </div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Connect</li>
</ul>
</nav>
<scrip src="script.js"></scrip>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> </body> </html>
<script>
function nav(){
$('.nav-links').toggle();
}
</script>
Hello i have an issue with a nav bar transition using javascript toggle method on an event listener, everything works fine except that when i reload my page i get this flickering effect, anyone have any idea on how stop that from happening?
by the way, im using #media screen so my nav bar is only visible on mobile.
Here is a link to a demo https://quizzical-hodgkin-1d9806.netlify.app
Below is my html, css and js files, thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
<link rel="stylesheet" href="./style.css">
<title>WebSiteOne</title>
</head>
<body>
<nav>
<!--Logo or Icon-->
<div class="logo">
<h4>Web Site</h4>
</div>
<!--Links on nav bar-->
<ul class="nav-links">
<li>Home</li>
<li>LinkOne</li>
<li>LinkTwo</li>
<li>LinkThree</li>
<li>LinkFour</li>
</ul>
<!--Burger button that is not a button-->
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="./app.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght#400;500&display=swap');
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: 'Baloo Tammudu 2', cursive;
}
nav{
display: flex;
justify-content: space-around;
background-color: rgb(160, 107, 148);
min-height: 12vh;
align-items: center;
}
.logo{
color: rgb(241, 241, 241);
text-transform: capitalize;
letter-spacing: 4px;
font-size: 20px;
}
.nav-links{
/*Add justify content space around and then you can play with the width*/
justify-content: space-around;
display: flex;
width: 40%;
}
.nav-links li{
list-style-type: none;
}
.nav-links a{
color: rgb(241, 241, 241);
text-decoration: none;
letter-spacing: 2px;
}
.burger div{
width: 25px;
height: 3px;
margin: 5px;
background-color: rgb(241, 241, 241);
}
.burger {
display: none;
cursor: pointer;
}
#media screen and (max-width: 1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
nav{
min-height: 15vh;
}
.logo{
font-size: 23px;
}
.nav-links{
position: absolute;
right: 0px;
height: 100vh;
top: 15vh;
background-color: rgba(0, 0, 0);
background-color: rgba(160, 107, 148, 0.9);
flex-direction: column;
align-items: center;
width:50% ;
z-index: 1;
transform: translateX(100%);
transition: transform 0.7s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
padding-bottom: 7px;
}
}
.nav-active{
transform: translateX(0%);
}
const navOpens = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navOpens();
My header is fixed and the text is set to relative. When I scroll the text goes over the header.
I would like my text not to go over my header.
The Javascript is at the beginning.
The CSS is in the middle.
The HTML is at the end.
This is my picture, hopefully it didn't hyperlink :)
I am new to web design and I am taking a course on CS50. Furthermore, I have already tried to make the text fixed and the header relative.
```function openNav() {
document.getElementById("mobile__menu").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile__menu").style.width = "0";
}```
``` * {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
position: fixed;
width: 100%;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}```
/* Mobile Nav */
```.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.right h1 {
margin: 10px;
padding: 10px;
text-transform: uppercase;
text-align: center;
position: relative;
top: 25%;
transform: translateY(-50%);
padding-top: 30px;
}
.right>* {
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
text-justify: center;
text-align: center;
margin: 10px;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 740px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}```
``` <!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>```
welcome!
Alright, so using a property called z-index, we can change the order of what appears on top, like so:
```function openNav() {
document.getElementById("mobile__menu").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile__menu").style.width = "0";
}```
``` * {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
position: fixed;
width: 100%;
z-index: 1;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}```
/* Mobile Nav */
```.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.right h1 {
margin: 10px;
padding: 10px;
text-transform: uppercase;
text-align: center;
position: relative;
top: 25%;
transform: translateY(-50%);
padding-top: 30px;
}
.right>* {
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
text-justify: center;
text-align: center;
margin: 10px;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 740px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}```
``` <!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>```
So, z-index default is actually set to 0, so setting an element to z-index: 1; will make that the "priority" to be ordered on top of everything else. Hope this helps.
Try adding
z-index:1;
to header
add your class="column right" style="z-index:-1";
//html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<!--only change this line--> <div class="column right" style="background-color:rgba(0, 0, 0, 0.53); z-index:-1">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>
I'm trying to create an effect where the nav bar items tuck in after you scroll down. This could be done effectively by increasing the bottom padding or decreasing the top padding. However, when I try to add this into my code, the transition does not show and nothing happens. An example of what I'm trying to create can be seen on this website.
My code so far can be seen in this fiddle.
$(document).ready(function() {
$(window).scroll(function() {
if($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
$('#menu1').removeClass('shrink');
}
else {
$('#nav').removeClass('shrink');
$('#menu1').removeClass('shrink');
}
});
});
/**********BODY GENERAL**********/
body {
margin: 0;
height: 2500px;
/* just to demonstrate how it will looks with content */
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* Fix this one day */
.bg-img {
height: 100vh;
width: 100%;
background: url('https://github.com/killerchef732/ItsAcademic/blob/master/images/Abkimage.JPG?raw=true');
background-size: cover;
background-position: center;
position: relative;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
#menu1 {
grid-column: 1;
padding-top: 0px;
padding-bottom: 0px;
}
#menu2 {
grid-column: 2;
padding-top: 0px;
padding-bottom: 0px;
}
#logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
padding-top: 0px;
padding-bottom: 0px;
}
#menu3 {
grid-column: 4;
padding-top: 0px;
padding-bottom: 0px;
}
#menu4 {
grid-column: 5;
padding-top: 0px;
padding-bottom: 0px;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: transparent;
z-index: 100;
transition: all ease .5s;
height: 70px;
position: relative;
z-index: 99;
}
/*============= NEW CSS RULES ============*/
/* #nav {
position: relative;
z-index: 99;
}
*/
#nav, #words{
height: 0px;
background: transparent;
display: block;
position: fixed;
width: 100%;
z-index: 99999;
transition: all ease .5s;
}
#words: {
font-size: 18px;
transition: all ease .5s;
}
#nav.shrink {
height: 80px;
transition: all ease .5s;
background: white;
}
#menu1.shrink{
padding-top: 0px;
transition: all ease .5s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<!-- Linking Jquery/Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!---- NEW BACKGROUND ELEMENT HERE ---->
<div class="background"></div>
<nav class="container">
<div id="menu1">
<a id="navLinks words" href="#home">Home</a>
</div>
<div id="menu2">
<a id="navLinks words" href="#upcoming">Tournaments</a>
</div>
<div id="logo">
<p>It's Academic</p>
</div>
<div id="menu3">
<a id="navLinks words" href="#history">History</a>
</div>
<div id="menu4">
<a id="navLinks words" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
</div>
</header>
<div class="Minfo">
<div class="subtitle">
CENTENNIAL<br>
<div class="title">
It's Academic
</div>
<br>
<div class="subtext">
Meets every Tuesday in Room 506
</div>
</div>
</div>
</div>
</body>
</html>
In my approach, the tuck-in should happen simultaneously with the nav bar transition as you can see in the javascript as they are grouped together. I can change that later.
Very nice looking site! Here's what you're looking for...
Just add this to your CSS and you're all set:
.shrink .container{
margin-top: -20px;
}
Of course you should adjust the -20px to whatever suits you!