Content goes over header - javascript

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>

Related

Button is not working when placed on background image for HTML?

I am having trouble with my button being clickable. The main goal I am trying to achieve is to make the button clickable with a background image and what's going on is the button isn't clickable right now.
If anyone can help it would greatly be appreciated! Thank you in advance!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Macondo", cursive;
font-size: 1.5rem;
}
.fas.fa-pause-circle {
display: none;
}
#wrapper {
background-image: url("../images/gundam.jpg");
background-size: cover;
background-position: center;
background-blend-mode: overlay;
min-height: 100vh;
min-width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.bgMusic {
position: absolute;
top: 64%;
left: 0;
right: 0;
margin: 0 auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
background-image: url("https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&w=1000&q=80");
}
.btn:hover {
opacity: 1;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(34, 34, 34, 0.5);
}
header #content {
position: relative;
z-index: 1;
}
header #content h1 {
font-size: 32px;
color: #fff;
font-weight: 900;
text-align: center;
}
header #content h1 span {
font-weight: 400;
color: #FF0000;
}
#media screen and (min-width: 480px) {
header #content h1 {
font-size: 48px;
}
}
#media screen and (min-width: 768px) {
header #content h1 {
font-size: 42px;
}
}
#media screen and (min-width: 1024px) {
header #content h1 {
font-size: 56px;
}
}
#media screen and (min-width: 1280px) {
header #content h1 {
font-size: 72px;
}
}
header #content h2 {
font-size: 32px;
color: #FDFEFF;
font-weight: 900;
margin-bottom: 20px;
text-align: center;
position: absolute;
top: 80%;
left: 43%;
}
header #content #countdown {
color: #FF0000;
font-size: 36px;
font-weight: 400;
}
#media screen and (min-width: 480px) {
header #content #countdown {
font-size: 42px;
}
}
#media screen and (min-width: 768px) {
header #content #countdown {
font-size: 56px;
}
}
#media screen and (min-width: 1024px) {
header #content #countdown {
font-size: 72px;
}
}
#media screen and (min-width: 1280px) {
header #content #countdown {
font-size: 88px;
}
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Macondo&display=swap" rel="stylesheet" />
<!-- <link href="css/main.css" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous" />
<!-- <link href="/css/all.min.css " rel="stylesheet" type="text/css" /> -->
<title>Mobile Suit Gundam</title>
</head>
<body>
</div>
<header>
<div id="content">
<div id="wrapper">
<h1>Mobile<span>Suit</span>Gundam</h1>
<h2>Coming Soon!</h2>
</div>
<div class="bgMusic">
<audio src="music/music.mp3" loop=""></audio>
<button class="btn">
<i class="fas fa-play-circle"></i>
<i class="fas fa-pause-circle"></i>
</button>
</div>
</header>
</div>
<!-- <script src="js/main.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
$(".btn .fa-play-circle").click(function() {
$(".bgMusic audio").trigger('play');
$(".btn .fa-play-circle").hide();
$(".btn .fa-pause-circle").show();
});
});
</script>
</body>

You don't have a background image. You have an overlay mask as a pseudo-element which blocks access to everything underneath. If you want to keep that layout you can add pointer-events: none to it to let clicks pass through, as I've done here.
Note that I've fixed up your HTML, which had a faulty opening div tag and a missing closing div tag. A good editor will make that kind of mistake apparent so you can fix them.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Macondo", cursive;
font-size: 1.5rem;
}
.fas.fa-pause-circle {
display: none;
}
#wrapper {
background-image: url("../images/gundam.jpg");
background-size: cover;
background-position: center;
background-blend-mode: overlay;
min-height: 100vh;
min-width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.bgMusic {
position: absolute;
top: 64%;
left: 0;
right: 0;
margin: 0 auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
background-image: url("https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&w=1000&q=80");
}
.btn:hover {
opacity: 1;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(34, 34, 34, 0.5);
pointer-events: none; /* <--------------------- I'm your huckleberry */
}
header #content {
position: relative;
z-index: 1;
}
header #content h1 {
font-size: 32px;
color: #fff;
font-weight: 900;
text-align: center;
}
header #content h1 span {
font-weight: 400;
color: #FF0000;
}
#media screen and (min-width: 480px) {
header #content h1 {
font-size: 48px;
}
}
#media screen and (min-width: 768px) {
header #content h1 {
font-size: 42px;
}
}
#media screen and (min-width: 1024px) {
header #content h1 {
font-size: 56px;
}
}
#media screen and (min-width: 1280px) {
header #content h1 {
font-size: 72px;
}
}
header #content h2 {
font-size: 32px;
color: #FDFEFF;
font-weight: 900;
margin-bottom: 20px;
text-align: center;
position: absolute;
top: 80%;
left: 43%;
}
header #content #countdown {
color: #FF0000;
font-size: 36px;
font-weight: 400;
}
#media screen and (min-width: 480px) {
header #content #countdown {
font-size: 42px;
}
}
#media screen and (min-width: 768px) {
header #content #countdown {
font-size: 56px;
}
}
#media screen and (min-width: 1024px) {
header #content #countdown {
font-size: 72px;
}
}
#media screen and (min-width: 1280px) {
header #content #countdown {
font-size: 88px;
}
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Macondo&display=swap" rel="stylesheet" />
<!-- <link href="css/main.css" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous" />
<!-- <link href="/css/all.min.css " rel="stylesheet" type="text/css" /> -->
<title>Mobile Suit Gundam</title>
</head>
<body>
<div>
<header>
<div id="content">
<div id="wrapper">
<h1>Mobile<span>Suit</span>Gundam</h1>
<h2>Coming Soon!</h2>
</div>
<div class="bgMusic">
<audio src="music/music.mp3" loop=""></audio>
<button class="btn">
<i class="fas fa-play-circle"></i>
<i class="fas fa-pause-circle"></i>
</button>
</div>
</div>
</header>
</div>
</body>

You need to import Jquery.
You can do it by adding this line inside the head section.
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
Jquery official site: https://releases.jquery.com/

You are adding listener on your icon instead of button.
$(".btn .fa-play-circle").click
Try using this
$(".btn").click

(Bootstrap 4) thumbnail with a caption on the right side when the screen is over X px

I would like to have a thumbnail with a caption on the right side when the screen is over X px.
I tried it with and figcaption, but I didn't manage it yet..
here is my attempt:
<style type="text/css">
body {
margin: 30px;
}
.my-container {
border: 1 px solid green;
}
.my-row {
position: relative;
align-content: center;
}
.my-col {
border: 3px dotted blue;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
list-style-type: none;
font-size: 14px !important;
}
.sidebar a {
display: block;
color: #666666;
padding: 8px;
text-decoration: none;
list-style-type: none;
}
.sidebar li {
list-style: none;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
#media screen and (min-width: 768px) {
.d-xl-none {
display: none;
}
}
#media screen and (max-width: 768px) {
div.content {
margin-left: 0;
}
div.preview {
margin-left: 0;
}
.sidebar {
height: 100%;
position: relative;
text-align: center;
margin-bottom: 0px !important;
display: none;
}
.sidebar a {
float: left;
align-items: center;
}
.caption {
text-align: center !important;
}
.containerCarousel {
margin-top: 0px;
margin-bottom: 150px;
width: 1fr;
}
}
#LP_img {
align-content: center;
margin: 0 auto;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 40px;
}
#media screen and (max-height: 480px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 20px;
top: 15px;
right: 35px;
}
.sidebar a {
text-align: center;
float: none;
}
.sidebar {
display: none;
}
.content {
margin-top: 10px !important;
}
.preview {
margin-top: 10px !important;
}
.caption {
text-align: center !important;
}
}
.PreviewImg {}
</style>
<!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- START Mobile Nav-->
<div id="myNav" class="overlay">
×
<div class="overlay-content">
painting
drawing
collage
video
current
text
biography
contact
</div>
</div>
<!-- END Mobile Nav-->
<span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()">☰ <font
size="-1"><b>Christoph Urwalek</b></font></span>
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><a class="active" href="./hungabunga.html"><b>Christoph Urwalek</b></a></li>
<li>painting</li>
<li>drawing</li>
<li>collage</li>
<li>video</li>
<li><a> </a></li>
<li>current</li>
<li>text</li>
<li>biography</li>
<li>contact</li>
</nav>
</div>
<!--END Sidebar -->
<!--START Wandcollage-->
<div class="col-md-9 ">
<figure class="figure">
<img src="http://christophurwalek.at/index/Wandcollage.jpg"
class="img-thumbnail figure-img img-fluid rounded" alt="wandcollage">
<figcaption class="figure-caption">wandcollage 100x100</figcaption>
</figure>
<figure class="figure">
<img src="http://www.christophurwalek.at/canvaswork/2020_Apelles/image_2020_Apelles/Apelles_230x177cm_2020__.jpg"
class="img-thumbnail figure-img img-fluid rounded" alt="wandcollage">
<figcaption class="figure-caption">wandcollage 100x100</figcaption>
</figure>
</div>
</div>
</div>
<!--END Wrapper-->
<script type="">
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>
It would be ideal if the captions of the thumbnails on the desktop look like this:
Screenshot
and if the user uses a mobile device the caption should be on the bottom of the image centered horizontally.
I'll try to solve this on my own but would be glad if someone could help me :)
Thanks in advance,

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.

Bar navigation on mobile screen weird flickering effect

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

Creating a "tuck in" effect for nav bar items

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!

Categories

Resources