Bar navigation on mobile screen weird flickering effect

Bar navigation on mobile screen weird flickering effect - javascript

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();

Related

in my html css and javascript code the "fas fa-bars" don't open the menu when clicked

when clicking on the bars its meant to open a menu, i am following a youtube video and his works fine however mine isn't working.
hotel website tutorial
// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click',function (){
header.classList.toggle('menu-open');
});
/*Import the fonts used*/
#import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Custom properties*/
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html{
font-size: 10px;
}
body{
font-family: 'Open Sans', sans-serif;
font-size:1.6rem;
color: var(--dark-color);
}
a{
text-decoration: none;
color:inherit;
}
ul{
list-style: none;
}
section{
padding: 5rem 0;
}
/*reusable styles*/
.container{
width:100%;
max-width:120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*header styles*/
.header{
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left:0;
background-color: var(--purple-transparent);
z-index:999;
}
/*header styles - nav*/
.nav{
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img{
max-width: 80%;
}
.hamburger-menu{
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times{
display: none;
}
.menu-open .hamburger-menu .fa-times{
display: block;
}
.menu-open .hamburger-menu .fa-bars{
display: none;
}
.nav-list{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100vh;
background-color: var(--purple-solid);
display:flex;
flex-direction: column;
align-items:center;
z-index:1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
.menu-open .nav-list{
opacity: 1;
transform: scale(1);
}
.nav-item:not(:last-child){
margin-bottom: .5rem;
}
.nav-link{
display: block;
color: #fff;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Travelix</title>
<!--Font awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header"></header>
<div class="container"></div>
<nav class="nav">
<a href="index.html" class="logo">
<img src="./images/logo.png" alt="">
</a>
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
I believe the
.menu-open .nav-list{
opacity: 1;
transform: scale(1);
}
part is meant to be triggered when the javascript is run to make the menu visible

You did not move all your menu code inside header as you should.
your header is just opened then closed: <header class="header"></header>
<header class="header">
// move code here
</header>
It should go:
.menu-open .hamburger-menu .fa-bars {
display: none;
}
and you where putting menu-open outside so .menu-open .hamburger-menu .fa-bars never happen.
// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
console.log(true)
header.classList.toggle('menu-open');
})
/*Import the fonts used*/
#import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Custom properties*/
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html {
font-size: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
color: var(--dark-color);
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
section {
padding: 5rem 0;
}
/*reusable styles*/
.container {
width: 100%;
max-width: 120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*header styles*/
.header {
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
background-color: var(--purple-transparent);
z-index: 999;
}
/*header styles - nav*/
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
max-width: 80%;
}
.hamburger-menu {
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times {
display: none;
}
.menu-open .hamburger-menu .fa-times {
display: block;
}
.menu-open .hamburger-menu .fa-bars {
display: none;
}
.nav-list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--purple-solid);
display: flex;
flex-direction: column;
align-items: center;
z-index: 1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
.menu-open .nav-list {
opacity: 1;
transform: scale(1);
}
.nav-item:not(:last-child) {
margin-bottom: .5rem;
}
.nav-link {
display: block;
color: #fff;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem;
}
more writing because stuff this I swear this is an easy fix but I'm just dumb
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Travelix</title>
<!--Font awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div class="container"></div>
<nav class="nav">
<a href="index.html" class="logo">
<img src="./images/logo.png" alt="">
</a>
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
</header>
<script src="main.js"></script>
</body>
</html>
voted to close due to typo.

Toggle button is not working in Javascript

I have created a Navigation bar and that contain Toggle Button .The problem I am facing is in the responsive view, after clicking on the toggle button ,the toggle button hides and shows the navigation bar.
But after hiding the toggle button I want to show another button upon which clicking the navigation bar hides.
I don't understand what I'm doing wrong and what should I do?
Here is The code is:
let menuBar=document.querySelector('#menu-bar');
navBar=document.querySelector('.navbar');
menuBar.onclick=()=>{
menuBar.classList.add('hide');
// menuBar.classList.add('fa-times');
navBar.classList.add('show');
times();
}
let icon="fas fa-times";
function times(){
if(navBar.classList.contains('show')){
menuBar.innerHTML=`<i class="${icon}"></i>`;
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
header{
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow:5px 5px 7px rgba(0,0,0,0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1{
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul{
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li{
margin-right: 3rem;
}
header .navbar ul li a{
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar{
font-size: 20px;
cursor: pointer;
display:none;
}
/*media query*/
#media (max-width:768px){
html{
font-size: 55%;
}
header #menu-bar{
display: block;
}
header #menu-bar.hide{
opacity: 0;
pointer-events: none;
}
header .navbar{
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show{
opacity: 1;
}
header .navbar ul{
flex-flow: column;
padding: 2rem;
}
header .navbar ul li{
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a{
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times{
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!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">
<title>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>

Some notes:
It was not working previously because you did not remove the hide class after adding it to menuBar
You are nesting an icon in an icon - not recommended
You are performing unnecessary checks - you should just use classList.toggle() instead
Here's the working code:
let menuBar = document.querySelector('#menu-bar');
navBar = document.querySelector('.navbar');
menuBar.onclick = () => {
navBar.classList.toggle('hide');
navBar.classList.toggle('show');
times();
}
let icon = "fas fa-times";
function times() {
menuBar.classList.toggle('fa-times');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
header {
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li {
margin-right: 3rem;
}
header .navbar ul li a {
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar {
font-size: 20px;
cursor: pointer;
display: none;
}
/*media query*/
#media (max-width:768px) {
html {
font-size: 55%;
}
header #menu-bar {
display: block;
}
header #menu-bar.hide {
opacity: 0;
pointer-events: none;
}
header .navbar {
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show {
opacity: 1;
}
header .navbar ul {
flex-flow: column;
padding: 2rem;
}
header .navbar ul li {
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a {
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times {
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!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">
<title>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar hide">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>

How to add responsive News Cards on this project

I have been trying to make a news website. It is just for practice and so far i was able to make a responsive navbar and custom scrollbar for it. However I am unable to make responsive news cards after that for some reason. I want to make responsive news cards under the h1 which includes a clickable link photo , A link heading , a small description and link to the author of the article to be shown on it. Can someone please explain me the issue and send me a solution ?
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu') .addEventListener('click',() => {
selectElement('header').classList.toggle('active');
})
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
a{
text-decoration: none;
display: block;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position:fixed;
top: 0px;
z-index: 1400;
height: 5rem;
width: 100%;
background-color: rgba(0,0,0,0.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
.nav-list-mobile{
display:none;
}
.nav-link{
font-size: 1.4rem;
color: #fff;
padding: 0 1rem;
transition: .3s;
}
.nav-link:hover{
color: greenyellow;
}
.nav-link-logo{
width: 1.6rem;
height: 5rem;
background: url("apple.svg") center no-repeat;
background-size: 22px;
}
.nav-link-search{
width: 1.6rem;
height: 5rem;
background: url("magnifying-glass.svg") center no-repeat;
}
.nav-link-bag{
width: 1.6rem;
height: 4.4rem;
background: url("magnifying-glass.svg") center no-repeat;
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32,0.08,0.24, 1),;
height: .56s cubic-bezier(0.32,0.08,0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04,0.04,0.12,0.96);
}
.line-top{
margin-top: -1rem;
margin-left: 10px;
}
.line-mid{
margin-top: 0rem;
margin-left: 20px;
}
.line-bottom{
margin-top: 1rem;
margin-left: 10px;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
.active .line-mid{
display: none;
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
header.active{
height: 100%;
background-color: #000;
transition: .3s;
}
.nav-link-logo{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 100%;
height: 4.8rem;
}
.nav{
position: relative;
}
.nav-link{
font-size:1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: center;
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn 1s ease-in;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
h1{
margin-top: 5rem;
margin-left: 20px;
font-weight: bolder;
font-size: 24px;
}
::-webkit-scrollbar{
width: 17px;
}
::-webkit-scrollbar-track{
border: 7px solid rgba(0,0,0,0.8);
box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-thumb{
background: linear-gradient(45deg,#06dee1,greenyellow);
border-radius: 15px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>News</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-mid"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Tech
</li>
<li class="nav-item">
Science
</li>
<li class="nav-item">
Travel
</li>
<li class="nav-item">
How To ?
</li>
<li class="nav-item">
More
</li>
<li class="nav-item">
</li>
<li class="nav-item nav-item-hidden">
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
<h1>Trending Now</h1>
<script src="main.js"></script>
</body>
</html>

Here is a rough and dirty example. CSS Code is added at the end of the example css.
Explanation:
All cards are placed into a wrapper div (here: .cards-wrapper) to anchor the card-grid.
In this case it is an very simple grid just to be example. It is done with css flexbox: on mobile it expands the cards to 100%, on tablet there are 2 columns and on wider screens there are 4 columns. The settings for the the respinsive columns are in the css elements #media... If you need introducing to flexbox see here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
All cards are wrapped in a div (here: card). That divs are part of the flexbox grid as they are the direct childs of the flexbox container. And the .card div is the parent card container to style the cards as well.
In the .card div the elements: image with link, headline with link, text, Author with link. Stylings are rough and dirty just to be example too.
If you are not experienced you may notice a little 'trick': the image fullfills the complete width of the card. The content part has a padding. This is possible because the card is devided in a head (.card-image div) and contend (.card-contentdiv). The image div has no margins and paddings. The link has been set to an block element and text-sizings has been set to zero to avoid white space effects. The content area has paddings prepared in the wrapper div .card-content. The other styling are as I think self-explaining ;-)
Hope it helps ... ;-)
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu') .addEventListener('click',() => {
selectElement('header').classList.toggle('active');
})
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
a{
text-decoration: none;
display: block;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position:fixed;
top: 0px;
z-index: 1400;
height: 5rem;
width: 100%;
background-color: rgba(0,0,0,0.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
.nav-list-mobile{
display:none;
}
.nav-link{
font-size: 1.4rem;
color: #fff;
padding: 0 1rem;
transition: .3s;
}
.nav-link:hover{
color: greenyellow;
}
.nav-link-logo{
width: 1.6rem;
height: 5rem;
background: url("apple.svg") center no-repeat;
background-size: 22px;
}
.nav-link-search{
width: 1.6rem;
height: 5rem;
background: url("magnifying-glass.svg") center no-repeat;
}
.nav-link-bag{
width: 1.6rem;
height: 4.4rem;
background: url("magnifying-glass.svg") center no-repeat;
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32,0.08,0.24, 1),;
height: .56s cubic-bezier(0.32,0.08,0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04,0.04,0.12,0.96);
}
.line-top{
margin-top: -1rem;
margin-left: 10px;
}
.line-mid{
margin-top: 0rem;
margin-left: 20px;
}
.line-bottom{
margin-top: 1rem;
margin-left: 10px;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
.active .line-mid{
display: none;
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
}
header.active{
height: 100%;
background-color: #000;
transition: .3s;
}
.nav-link-logo{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 100%;
height: 4.8rem;
}
.nav{
position: relative;
}
.nav-link{
font-size:1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: center;
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn 1s ease-in;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
h1{
margin-top: 5rem;
margin-left: 20px;
font-weight: bolder;
font-size: 24px;
}
::-webkit-scrollbar{
width: 17px;
}
::-webkit-scrollbar-track{
border: 7px solid rgba(0,0,0,0.8);
box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-thumb{
background: linear-gradient(45deg,#06dee1,greenyellow);
border-radius: 15px;
}
/* **********************************
ADDED
cards css
********************************** */
/* corection: header to front */
header {
z-index: 999;
}
/* card mini-grid to make reponsive */
.cards-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0;
}
.card {
flex-basis: 100%;
box-sizing: border-box;
margin-bottom: 20px;
}
#media only screen and (min-width: 768px) {
.cards-wrapper {
margin: 20px 20px;;
}
.card {
flex-basis: 49%;
}
}
#media only screen and (min-width: 1024px) {
.card {
flex-basis: 24%;
}
}
/* card mini-styling */
.card {
border: 2px solid #333;
border-radius: 10px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: auto;
margin: 0;
}
.card-image a {
display: block;
font-size: 0;
line-height: 0;
margin: 0;
}
.card-content {
padding: 10px;
}
.card h2 a {
margin-bottom: 10px;
color: #333;
}
.card-author {
margin-top: 10px;`enter code here`
}
.card-author a {
display: inline;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>News</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-mid"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Tech
</li>
<li class="nav-item">
Science
</li>
<li class="nav-item">
Travel
</li>
<li class="nav-item">
How To ?
</li>
<li class="nav-item">
More
</li>
<li class="nav-item">
</li>
<li class="nav-item nav-item-hidden">
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
<h1>Trending Now</h1>
<!--
#############################################
ADDED
cards html
#############################################
-->
<div class="cards-wrapper">
<div class="card">
<div class="card-image">
<a href="#">
<img src="https://dummyimage.com/600x400/000/0011ff&text=card">
</a>
</div>
<div class="card-content">
<h2>Titel with link</h2>
<div class="card-description">
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>
<div class="card-author">
Author: Jonny Brown
</div>
</div>
</div><!-- .card -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="https://dummyimage.com/600x400/000/0011ff&text=card">
</a>
</div>
<div class="card-content">
<h2>Titel with link</h2>
<div class="card-description">
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>
<div class="card-author">
Author: Jonny Brown
</div>
</div>
</div><!-- .card -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="https://dummyimage.com/600x400/000/0011ff&text=card">
</a>
</div>
<div class="card-content">
<h2>Titel with link</h2>
<div class="card-description">
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>
<div class="card-author">
Author: Jonny Brown
</div>
</div>
</div><!-- .card -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="https://dummyimage.com/600x400/000/0011ff&text=card">
</a>
</div>
<div class="card-content">
<h2>Titel with link</h2>
<div class="card-description">
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>
<div class="card-author">
Author: Jonny Brown
</div>
</div>
</div><!-- .card -->
<script src="main.js"></script>
</body>
</html>

How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?

I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
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();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
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: white;
margin: 5px;
transition: all 0.3s ease;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
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);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms &amp Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}

Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.

Content goes over header

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>

Develop Reference

JavaScript is the programming language of the Web.

Bar navigation on mobile screen weird flickering effect - javascript

Related

in my html css and javascript code the "fas fa-bars" don't open the menu when clicked

Toggle button is not working in Javascript

How to add responsive News Cards on this project

How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?

Content goes over header

Categories

Resources