I followed this tutorial here and edited it a little bit to change it to this:
<script lang="text/javascript">
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("header").style.display = "block";
} else {
document.getElementById("header").style.display = "none";
}
}
</script>
With the header HTML being:
<div style="display: none;" id="header">Header</div>
When I try this in my .html file it will not work and doesn't even say a log in the console if I ask it to. I created a new HTML file with no reference to my CSS file and that worked so I think it is something to do with that, I don't know what though. Here is my CSS:
* {
box-sizing: border-box;
}
body {
/*Want to change background image?*/
/*Upload a new one to the img folder.*/
/*Make sure you name it 'minecraft.jpg'*/
background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
url("../img/background.jpg") no-repeat center center fixed;
background-size: cover;
font-family: "Open Sans", Helvetica;
margin: 0;
position: relative;
}
#header {
background-color: #f1f1f1; /* Grey background */
padding: 50px 10px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font size */
font-weight: bold;
position: fixed; /* Fixed position - sit on top of the page */
top: 0;
width: 100%; /* Full width */
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
html,
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
scroll-behavior: smooth;
}
a {
text-decoration: none;
/* color: rgb(0, 0, 0); */
}
.a-contact {
text-decoration: underline !important;
color: black;
}
.a-contact:hover {
color: rgb(236, 149, 35);
transition: all 0.3s ease-in;
}
p {
margin: 0;
padding: 3px;
}
.container {
text-align: center;
}
.logo img {
width: 225px;
/* Change image size for mobile */
-webkit-animation-name: logo;
animation-name: logo;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#-webkit-keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.playercount {
display: inline-block;
margin: 20px 15px 0 15px;
padding: 2px 0;
background-color: rgba(15, 199, 209, 0.75);
font-size: 1em;
color: white;
text-align: center;
border-radius: 5px 0 5px 0;
line-height: 27px;
}
.playercount>p>span {
font-weight: bold;
padding: 1px 4px;
border-radius: 3px;
background: rgba(9, 150, 158, 0.7);
margin: 0 2px;
}
.extrapad {
padding: 0;
}
.ip {
cursor: pointer;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
padding: 18px 0 10px 0;
}
.item img {
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-bottom: 7px;
}
.item img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.img {
width: 80%;
}
.title {
font-weight: bold;
font-size: 17px;
color: white;
}
.subtitle {
color: #cfcfcf;
font-size: 12px;
}
.title,
.subtitle {
margin: 0;
padding: 0;
}
#media(min-width: 400px) {
.logo img {
width: 280px;
/* Change image size for mid sized devices */
}
.playercount {
margin-top: 30px;
padding: 5px;
}
.playercount>p>span {
padding: 2px 7px;
}
}
#media(min-width: 1250px) {
.title {
font-size: 24px;
}
.subtitle {
font-size: 15px;
}
.logo img {
width: 470px;
/* Change image size for desktop */
}
.logo {
margin-bottom: 28px;
}
.img {
width: 100%;
}
.items {
padding: 30px 0 20px 0;
}
.playercount {
font-size: 1.22em;
padding: 10px;
}
.extrapad {
padding: 0 42.5px;
}
.playercount>p>span {
padding: 4px 7px;
}
}
#media(min-width: 1000px) {
.items {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.item:not(:first-child) {
margin-left: 90px;
}
}
.footer {
position: absolute;
color: white;
margin-left: 5px;
top: 98%;
left: 0;
position: fixed;
z-index: 1;
}
.background {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 110%;
height: 50%;
}
.background-white {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 220%;
height: 50%;
}
.background-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 200%;
height: 50%;
}
.background-white-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 310%;
height: 50%;
}
.inner {
background-color: rgba(255, 136, 0, 0.781);
height: 40%;
top: 160%;
width: 100%;
position: absolute;
}
.inner-white {
background-color: rgba(255, 255, 255, 0.781);
height: 40%;
top: 270%;
width: 100%;
position: absolute;
}
/* .inner-text {
text-align: center;
} */
.inner-text-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-h2 {
font-size: 35px;
text-align: center;
}
.contact-area {
padding: 20px;
border-radius: 5px;
background-color: rgb(255, 255, 255);
border-color: black;
border-style: dashed;
border-width: 5px;
width: 50% !important;
left: 25% !important;
position: relative;
z-index: 2;
}
.inner-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.inner-white-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.solved {
color: orange !important;
font-weight: bold;
}
.italic {
font-style: italic;
}
/* Scroll Down */
#s-scroll {
position: relative;
width: 24px;
height: 24px;
}
.chevroncontainer {
position: absolute;
/* margin-left: auto;
margin-right: auto; */
top: 30%;
/* right: 50%; */
/* left: 50%; */
/* top: 30%;
left: -30%; */
}
.chevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 0.2s ease-out infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
margin-left: -18px;
}
/* .chevroncontainer {
position: absolute;
bottom: 100px !important;
} */
.chevron:first-child {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
.chevron:nth-child(2) {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
/* CHEVRON CHANGED */
.changedchevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out infinite;
/* margin-left: -538px; */
margin-left: -678px;
}
.changedchevronNO {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out 1;
margin-left: -18px;
}
/* .changedchevron:first-child {
animation: move 2s ease-out 0.2s infinite;
}
.changedchevron:nth-child(2) {
animation: move 2s ease-out 0.2s infinite;
} */
.changedchevron:before,
.changedchevron:after {
content: ' ';
position: absolute;
top: 0;
height: 40%;
height: 40%;
width: 51%;
background: #fff;
}
.changedchevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.changedchevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
/* CHEVRON CHANGED END */
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
height: 40%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
#keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 17px;
color: #fff !important;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
/* margin-left: -60px !important; */
cursor: pointer !important;
/* margin-left: -1058px; */
margin-left: -1338px;
}
#keyframes pulse {
to {
opacity: 1;
}
}
I'm sorry if this doesn't make any sense, I can't wrap my head around this problem either! Please tell me if you need more information and I can provide it.
Thanks!
I noticed 2 things:
Rather than window you may want document.body - I'm sure you'd rather scroll body and not the entire window
Rather than .onscroll you may want .addEventListener - Attaching JavaScript Handlers to Scroll Events — a how-NOT-to
Check out this snippet where I made those changes. I also made sure scrolling within a div wouldn't affect scrolling on document.body
document.body.addEventListener('scroll', function() {
scrollFunction()
})
// When the user scrolls down 50px from the top of the document, resize the header's font size
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("header").style.display = "block";
} else {
document.getElementById("header").style.display = "none";
}
}
* {
box-sizing: border-box;
}
body {
/*Want to change background image?*/
/*Upload a new one to the img folder.*/
/*Make sure you name it 'minecraft.jpg'*/
background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
url("../img/background.jpg") no-repeat center center fixed;
background-size: cover;
font-family: "Open Sans", Helvetica;
margin: 0;
position: relative;
}
#header {
background-color: #f1f1f1; /* Grey background */
padding: 50px 10px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font size */
font-weight: bold;
position: fixed; /* Fixed position - sit on top of the page */
top: 0;
width: 100%; /* Full width */
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
html,
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
scroll-behavior: smooth;
}
a {
text-decoration: none;
/* color: rgb(0, 0, 0); */
}
.a-contact {
text-decoration: underline !important;
color: black;
}
.a-contact:hover {
color: rgb(236, 149, 35);
transition: all 0.3s ease-in;
}
p {
margin: 0;
padding: 3px;
}
.container {
text-align: center;
}
.logo img {
width: 225px;
/* Change image size for mobile */
-webkit-animation-name: logo;
animation-name: logo;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#-webkit-keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.playercount {
display: inline-block;
margin: 20px 15px 0 15px;
padding: 2px 0;
background-color: rgba(15, 199, 209, 0.75);
font-size: 1em;
color: white;
text-align: center;
border-radius: 5px 0 5px 0;
line-height: 27px;
}
.playercount>p>span {
font-weight: bold;
padding: 1px 4px;
border-radius: 3px;
background: rgba(9, 150, 158, 0.7);
margin: 0 2px;
}
.extrapad {
padding: 0;
}
.ip {
cursor: pointer;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
padding: 18px 0 10px 0;
}
.item img {
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-bottom: 7px;
}
.item img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.img {
width: 80%;
}
.title {
font-weight: bold;
font-size: 17px;
color: white;
}
.subtitle {
color: #cfcfcf;
font-size: 12px;
}
.title,
.subtitle {
margin: 0;
padding: 0;
}
#media(min-width: 400px) {
.logo img {
width: 280px;
/* Change image size for mid sized devices */
}
.playercount {
margin-top: 30px;
padding: 5px;
}
.playercount>p>span {
padding: 2px 7px;
}
}
#media(min-width: 1250px) {
.title {
font-size: 24px;
}
.subtitle {
font-size: 15px;
}
.logo img {
width: 470px;
/* Change image size for desktop */
}
.logo {
margin-bottom: 28px;
}
.img {
width: 100%;
}
.items {
padding: 30px 0 20px 0;
}
.playercount {
font-size: 1.22em;
padding: 10px;
}
.extrapad {
padding: 0 42.5px;
}
.playercount>p>span {
padding: 4px 7px;
}
}
#media(min-width: 1000px) {
.items {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.item:not(:first-child) {
margin-left: 90px;
}
}
.footer {
position: absolute;
color: white;
margin-left: 5px;
top: 98%;
left: 0;
position: fixed;
z-index: 1;
}
.background {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 110%;
height: 50%;
}
.background-white {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 220%;
height: 50%;
}
.background-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 200%;
height: 50%;
}
.background-white-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 310%;
height: 50%;
}
.inner {
background-color: rgba(255, 136, 0, 0.781);
height: 40%;
top: 160%;
width: 100%;
position: absolute;
}
.inner-white {
background-color: rgba(255, 255, 255, 0.781);
height: 40%;
top: 270%;
width: 100%;
position: absolute;
}
/* .inner-text {
text-align: center;
} */
.inner-text-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-h2 {
font-size: 35px;
text-align: center;
}
.contact-area {
padding: 20px;
border-radius: 5px;
background-color: rgb(255, 255, 255);
border-color: black;
border-style: dashed;
border-width: 5px;
width: 50% !important;
left: 25% !important;
position: relative;
z-index: 2;
}
.inner-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.inner-white-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.solved {
color: orange !important;
font-weight: bold;
}
.italic {
font-style: italic;
}
/* Scroll Down */
#s-scroll {
position: relative;
width: 24px;
height: 24px;
}
.chevroncontainer {
position: absolute;
/* margin-left: auto;
margin-right: auto; */
top: 30%;
/* right: 50%; */
/* left: 50%; */
/* top: 30%;
left: -30%; */
}
.chevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 0.2s ease-out infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
margin-left: -18px;
}
/* .chevroncontainer {
position: absolute;
bottom: 100px !important;
} */
.chevron:first-child {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
.chevron:nth-child(2) {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
/* CHEVRON CHANGED */
.changedchevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out infinite;
/* margin-left: -538px; */
margin-left: -678px;
}
.changedchevronNO {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out 1;
margin-left: -18px;
}
/* .changedchevron:first-child {
animation: move 2s ease-out 0.2s infinite;
}
.changedchevron:nth-child(2) {
animation: move 2s ease-out 0.2s infinite;
} */
.changedchevron:before,
.changedchevron:after {
content: ' ';
position: absolute;
top: 0;
height: 40%;
height: 40%;
width: 51%;
background: #fff;
}
.changedchevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.changedchevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
/* CHEVRON CHANGED END */
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
height: 40%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
#keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 17px;
color: #fff !important;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
/* margin-left: -60px !important; */
cursor: pointer !important;
/* margin-left: -1058px; */
margin-left: -1338px;
}
#keyframes pulse {
to {
opacity: 1;
}
}
<div style="display: none;" id="header">Header</div>
<div style="width: 100px; height: 500px; overflow: scroll">
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
</div>
I tried my best to make sense of the title but for more references, I am giving screenshots below the menu when it slides over the page covering the content the content should be hidden but its not
Before:
https://imgur.com/PTNwfdA
After:
https://imgur.com/B2Iz4IE
Here's the CSS for my navigation:
/* navbar Start*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked~.wrapper {
/*left: 0;*/
right: 0;
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 3px solid #000000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before {
transform: translateY(-8px);
}
.menu-btn:after {
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked+.menu-btn span {
transform: scaleX(0);
}
#active:checked+.menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked+.menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul {
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: right;
}
.wrapper ul li {
height: 10%;
margin: 15px 0;
}
.wrapper ul li a {
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #4114a1;
}
input[type="checkbox"] {
display: none;
}
.product a img {
display: none;
position: absolute;
left: -400px;
top: -200px;
}
.product a img {
display: none;
}
.product a:hover img {
display: inherit;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
overflow-y: hidden;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#active:checked~.wrapper ul li a {
opacity: 1;
align-items: center;
}
.wrapper ul li a {
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
font-family: 'LemonMilk';
align-items: center;
}
#active:checked~.wrapper ul li a {
transform: none;
transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
/* easeOutBackを緩めた感じ */
transition-delay: .6s;
transform: translateX(-100px);
}
.pages-nav--open {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pages-nav__item {
display: flex;
flex-direction: row;
min-height: 300vh;
}
.pages-nav .pages-nav__item--social {
width: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
transition: transform 1.2s, opacity 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.pages-nav--open .pages-nav__item--social {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.link {
font-size: 0.85em;
font-weight: bold;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.link:hover,
.link:focus {
color: #fff;
}
.link--page {
display: block;
color: #cecece;
text-align: center;
}
.link--page:not(.link--faded)::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 50%;
height: 2px;
margin: 5px 0 0 -15px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.link--page:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.link--faded {
color: #4f4f64;
}
.link--faded:hover,
.link--faded:focus {
color: #5c5edc;
}
.link--page.link--faded {
font-size: 0.65em;
}
.link--social {
font-size: 1.5em;
margin: 0 0.75em;
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
#media screen and (max-width: 40em) {
.js .pages-nav {
display: block;
padding: 10px 20px 0 20px;
text-align: left;
}
.pages-nav__item {
width: 100%;
}
.pages-nav__item--small {
display: inline-block;
width: auto;
margin-right: 5px;
}
.pages-nav__item--social {
font-size: 0.9em;
}
.menu-button {
top: 15px;
right: 10px;
left: auto;
}
.info {
font-size: 0.85em;
}
.poster {
margin: 1em;
}
}
/* ///////////////////// navbar end ///////////////////////// */
and here's my css for the page this is on:
.typewritter {
height: 80vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 28%;
animation: typing 4s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
body {
margin: 0px;
}
#container {
/* Center the text in the viewport. */
position: absolute;
display: flex;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
filter: url(#threshold) blur(0.6px);
}
/* Your average text styling */
#text1, #text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
If any more info is needed I'll be happy to provide it!
all you need to do is just set a greater z-index to .wrapper also u need to give a z-index to .menu-btn else it would be below the wrapper
this should be your code
.menu-btn{
position: absolute;
z-index: 12;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.wrapper{
position: fixed;
z-index: 10;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
I am trying to make a burger menu button appear in the right hand corner of the screen when it gets to a certain size (960px) but when I minimize the window nothing shows up..
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll website</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
</html>
style.css : (if you comment out 'top: -1000px' in the media query, the menu screen will drop down)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display:flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius:4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
}
Please help, I feel like I've tried everything and nothing works.
The reason why it does not appear
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
no information to appear here.
You can add an icon or a text inside, or you can fill in the spans.
Remember that the main color of the texts is black, you may not see it because you are black on your background. You will need to color it.
You are not actually doing anything as of yet. Add a navbar, then add a script. I used your classlist to toggle in this scenario:
document.getElementById('mobile-menu').addEventListener("click", function(e) {
this.classList.toggle('open');
const navbar = document.querySelector('.navbar__menu');
navbar.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu span:nth-child(1) {
top: 0px;
}
#mobile-menu span:nth-child(2),
#mobile-menu span:nth-child(3) {
top: 18px;
}
#mobile-menu span:nth-child(4) {
top: 36px;
}
#mobile-menu.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#mobile-menu {
width: 60px;
height: 45px;
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#mobile-menu span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#mobile-menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#mobile-menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#mobile-menu.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
Full code:
<!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>scroll website</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu span:nth-child(1) {
top: 0px;
}
#mobile-menu span:nth-child(2),
#mobile-menu span:nth-child(3) {
top: 18px;
}
#mobile-menu span:nth-child(4) {
top: 36px;
}
#mobile-menu.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#mobile-menu {
width: 60px;
height: 45px;
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#mobile-menu span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#mobile-menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#mobile-menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#mobile-menu.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
</style>
</head>
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
<script>
document.getElementById('mobile-menu').addEventListener("click", function(e) {
this.classList.toggle('open');
const navbar = document.querySelector('.navbar__menu');
navbar.classList.toggle('active');
});
</script>
</html>