The vertical scroll bar has become inactive. The strange thing about this code is that it is running fine from where I copied it but for me, the scrollbar is there but it is not clickable(it is more like transparent). I can move it with the arrow keys but not with the mouse. Why is this so?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/a54d2cbf95.js"></script>
<link rel="stylesheet" href="style.css">
<title>Back To Top</title>
</head>
<style>
* {
margin:0;
padding:0;
}
html body {
scroll-behavior: smooth;
overflow-y: auto;
}
section {
height:75vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 8px;
}
.section1 {
background: #f0932b;
}
.section2 {
background: #eb4d4b;
}
.section3 {
background: #7ed6df;
}
.section4 {
background: #22a6b3;
}
.to-top {
background: white;
position: fixed;
bottom: 16px;
right:32px;
width:50px;
height:50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:32px;
color:#1f1f1f;
text-decoration: none;
opacity:0;
pointer-events: none;
transition: all .4s;
}
.to-top.active {
bottom:32px;
pointer-events: auto;
opacity:1;
}
</style>
<body>
<section class="section1">Section 1</section>
<section class="section2">Section 2</section>
<section class="section3">Section 3</section>
<section class="section4">Section 4</section>
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
<script >
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})
</script>
</body>
</html>
To make the scrollbar active is my main problem. I am actually trying to change the style of the scroll bar
I'll be very grateful if you fix my code. All I want is to be able to scroll with my mouse.
I tried a couple of things but it didn't help.
thank you
Instead of trying to fixed current code try to create a new scroll bar..scroll bar code is given below ...
just copy past it customize it and enjoy
/**************** scroll bar *******************/
::-webkit-scrollbar{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
border-radius: 10px;
/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
background-image: -webkit-linear-gradient(160deg, rgb(68, 67, 67),rgb(129, 127, 127), rgb(68, 67, 67));
}
/**************** /scroll bar ********************/
I think it's because overflow-y: auto;
It should be scroll or visible
The arrow icon problem is with your fontawesome kit. You can look into that otherwise you can use fontawesome cdn. I added some css for scrollbar now It will work perfectly fine.
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})
* {
margin:0;
padding:0;
}
html body {
scroll-behavior: smooth;
overflow-y: auto;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
section {
height:75vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 8px;
}
.section1 {
background: #f0932b;
}
.section2 {
background: #eb4d4b;
}
.section3 {
background: #7ed6df;
}
.section4 {
background: #22a6b3;
}
.to-top {
background: white;
position: fixed;
bottom: 16px;
right:32px;
width:50px;
height:50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:32px;
color:#1f1f1f;
text-decoration: none;
opacity:0;
pointer-events: none;
transition: all .4s;
}
.to-top.active {
bottom:32px;
pointer-events: auto;
opacity:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<title>Document</title>
</head>
<body>
<section class="section1">Section 1</section>
<section class="section2">Section 2</section>
<section class="section3">Section 3</section>
<section class="section4">Section 4</section>
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
</body>
</html>
Related
I'm having trouble figuring out how to make the data-title only appear on hovering of the up-arrow only when the footer is down/not showing. However, I would also appreciate another solution where the data-title would still be visible when hovering the up-arrow even when the footer is up/showing. In this case, I would prefer the data-title to be displayed in its original position, up-right/0deg and on top of the up-arrow, rather than rotated 180deg and under the up-arrow.
I've tried using CSS and JavaScript to add and remove the data-title attribute, empty its innerHTML, and toggle its display, but nothing seems to work the way I want. Specifically, I was expecting the data-title to only appear on hover of an element (let's call it "Element A") when another element (let's call it "Element B") is hidden. Element A is the up-arrow, and I want the data-title to be shown on hover of Element A when Element B (the footer) is not visible on the page.
I suspect that the solution may be simple, but I'm struggling to figure it out. Any help or suggestions would be greatly appreciated.
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior:smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px; /* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p{
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class{
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color:black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
So apply a style when the sibling as the show class to hide it from view
.slide-up-footer.show + .up-arrow > .custom-class:hover::before {
display: none;
}
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px;
/* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p {
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class {
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color: black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
.slide-up-footer.show+.up-arrow>.custom-class:hover::before {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
Please how can make a search box that on click on the search icon should open another page for the search box Facebook search bar. Thanks in advance.
I tried to create it using HTML and CSS only
here the result:
body {
margin: 0;
}
nav {
background-color: rgba(0, 0, 255, 0.172);
border-bottom: 1px solid blue;
padding: 0.5em 0;
display: grid;
place-items: center;
}
nav input[type="text"] {
font-size: 1.5em;
border-radius: 2em;
border: none;
color: white;
width: 1.5em;
transition-duration: 0.5s;
}
nav input[type="text"]:hover,
nav input[type="text"]:focus {
width: calc(90vw - 2em);
color: rgb(0, 51, 255);
border-radius: 0.2em;
transition-duration: 1s;
padding: 0 2em 0 0;
}
input[type="text"]:hover~svg,
input[type="text"]:focus~svg {
right: 10px;
}
nav #content {
display: grid;
grid-auto-flow: column;
place-items: center;
}
#content svg {
width: 1.5em;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
z-index: 1;
}
#content {
position: relative;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div id="content">
<input type="text">
<!--search icon-->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" focusable="false" class="style-scope yt-icon"><g class="style-scope yt-icon"><path d="M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z" class="style-scope yt-icon"></path></g></svg>
</div>
</nav>
</body>
</html>
I'm trying to use icons from fontawesome to create a menu that will pop up on the mobile version of my site. However, the icons do not appear and are not clickable, thus the animation that makes the menu pop up does not work. In addition, some of the items do not have their own row, as seen in the gallery and cv section, and the text on my homepage is not centered. Could someone please explain how to fix these issues? Thank you![enter image description here][1]
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav a{
color: #fff;
text-decoration: none;
font-size: 18px;
}
nav a:hover{
color:#f44336;
transition: .4s;
}
.nav-links{
flex:1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
nav ul li a:hover{
color:#f44336;
transition: .4s;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 54px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
nav .fa{
display: none;
}
#media(max-width: 700px){
.text-box h1{
font-size: 20px;
}
.navi-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa{
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=">
<title>Personal Homepage</title>
<link rel="stylesheet" href="style.css">
<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=Noto+Sans:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<section class="header">
<nav>
AMANDA YEE
<div class="nav-links" id="navLinks">
<i class="fa fa-times-circle" onclick="hideMenu()"></i>
<ul>
<li>ABOUT</li>
<li>GALLERY</li>
<li>CV</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>NICE TO MEET YOU</h1>
<p>Hi! My name is Amanda Yee and I'm a User Experience Designer studying at Pratt.
</p>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementbyId("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
To use font awesome 5 icons, go to their official website and create a kit using your email address. They will provide you a script tag add that script tag in your HTML file's head and now you are good to use fa icons. One thing to note is that now fa fa-bars will be fas fa-bars.
The thing why Gallery and CV are showing in a row is you have set wrong class name in your media query:
.navi-links ul li {
display: block;
}
In addition to this, I will propose few changes to your file-
In the 4th line replace the viewport meta tag with the below code:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
In your script document.getElementbyId is not properly written replace that line with the below code:
var navLinks = document.getElementById("navLinks");
I hope it worked as you expected.
I've been following a tutorial about nav bars and everything is good except when I make the window small and try the menu button and re-scale the window to normal size everything disappears.
I've tried adding an if statement in the JavaScript but that doesn't solve the problem.
https://codepen.io/diegopiscoya/pen/yZJWBy
<script type="text/javascript">
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
</script>
I expected the script to work only when the window size is <900 but it works always, so when the menu button hides the nav bar it does it in full size as well.
So, let's understand what is happening on the code...
When $(".menu").click(...) is triggered, it fires $("nav").slideToggle(500);, the slide toggle method on its final action will add a inline css property on the nav element, it will be display: block; if nav was hidden, or display: none if nav was displayed.
Then when you open and close the mobile menu and you re-scale the window wider than 900px, the inline display: none still on the nav, so it is not displaying because the inline CSS is in effect.
The solution would be:
A workaround you can do is to "force" the CSS to apply display:block to your nav if the window is wider than 900px, by using the #media and setting the !important rule.
So:
#media(min-width: 901px) {
nav#navegacion {
display: block !important;
}
}
This is a CSS solution, of course there is many different ways to do it by the CSS and Javascript. But I believe that is a simple one.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
body{
margin: 0px;
padding: 0px;
font-family: "Bree serif", serif;
}
#navegacion{
width: 100%;
padding: 0 50px;
box-sizing: border-box;
}
.logo{
margin: 0;
padding: 15px 20px;
float: left;
}
#nav-list{
padding: 0;
margin: 0;
float: right;
}
#nav-list li{
list-style: none;
display: inline-block;
padding: 20px 30px;
transition: .5s;
}
#nav-list li a{
color: black;
text-decoration: none;
}
.nav_li:hover{
background: rgba(0, 0, 0, 0.089);
}
.resp-menu{
width: 100%;
background:#fff;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.resp-menu a{
margin: 0;
padding: 3px 0;
float: left;
}
.resp-menu h4{
margin: 0;
padding: 5px 10px;
color: #fff;
float: right;
background: yellow;
text-transform: uppercase;
cursor: pointer;
}
#media(max-width: 900px)
{
#navegacion{
display: none;
padding: 0;
}
.resp-menu{
display: block;
}
.logo{
display: none;
float: none;
}
#nav-list{
float: none;
display: block;
}
#nav-list li{
display: block;
color: black;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(12, 8, 8, 0.1);
}
.resp-menu a{
display: block;
}
}
#media(min-width: 901px) {
nav#navegacion {
display: block !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>document</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
</head>
<body>
<nav id="navegacion">
<img src="wilphar_logo2.png" width="70">
<ul id="nav-list">
<li class="nav_li">Inicio</li>
<li class="nav_li">Nosotros</li>
<li class="nav_li">Productos</li>
<li class="nav_li">Contacto</li>
</ul>
<div style="clear: both"></div>
</nav>
<div class="resp-menu">
<img src="wilphar_logo2.png" width="70">
<h4 class="menu">menu</h4>
<div style="clear: both"></div>
</div>
</body>
</html>
I am following a tutorial titled 'Responsive HTML & CSS Side Menu From Scratch' by Traversy Media on Youtube (I'd post the link by not enough reputation yet) and I am having a couple of issues with my side-nav. Note the way that it appears before I click on the openSlideMenu() icon on the top left-hand corner versus when I have clicked on it. I have followed the teacher's code to-the-t, yet there appears to be at least 4 problems on the interface.
There is an open tag symbol positioned near the 3-bar icon that remains both when the menu is up and when it is not.
The side-nav, when clicked to open, goes far away from the left side of the page, creating a large whitespace gap between the menu and the left-side of the page, where no gap should exist.
The side-nav goes over the title text 'Responsive Side Menu', thus blocking the 'e Menu' part of the text, whereas the title text should be responsive and move when the side-nav moves, as portrayed in the tutorial.
The closeMenuButton() within the side-nav has its position straight over the elements whereas it should be positioned in the right hand corners.
My HTML/Javascript Code:
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
document.getElementById('side-menu').style.marginLeft = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0px';
document.getElementById('side-menu').style.marginLeft = '0px';
}
body {
font-family: "Arial", Serif;
background-color: #f4f4f4;
overflow-x: hidden;
}
.navbar {
background-color: #3b5998;
overflow: hidden;
height: 63px;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar ul {
margin: 8px 0 0 0;
list-style: none;
}
.navbar a:hover {
background-color: #ddd;
color: #000;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
postion: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
# main {
transition: margin-left 0.5s;
padding: 20px;
overflow: hidden;
width: 100%;
}
#media(max-width: 568px) {
.navbar-nav {
display: none
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" href="style.css" </head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onClick="openSlideMenu()">
<<svg width="30" height="30">
<path d="M0,5 30,5" stroke=#fff stroke-width="5"/>
<path d="M0,14 30,14" stroke=#fff stroke-width="5"/>
<path d="M0,23 30,23" stroke=#fff stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
×
Home
About
Services
Contact
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>
</body>
</html>
Additionally, the teacher has the code that he produced in the description of his video on Youtube, which you can find as the first result by searching 'Responsive HTML & CSS Side Menu From Scratch'.
The code was full of mistakes
Here is the working code
Find your mistakes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style media="screen">
body {
font-family: "Arial", Serif;
background-color: #f4f4f4;
overflow-x: hidden;
}
.navbar {
background-color: #3b5998;
overflow: hidden;
height: 63px;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar ul {
margin: 8px 0 0 0;
list-style: none;
}
.navbar a:hover {
background-color: #ddd;
color: #000;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
margin-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
display: inline;
}
#main {
transition: margin-left 0.5s;
padding: 20px;
overflow: hidden;
width: 100%;
}
.open-slide {
display: none;
}
#media(max-width: 568px) {
.navbar-nav {
display: none
}
.open-slide {
display: inline-block;
}
}
</style>
</head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onClick="openSlideMenu()">
<<svg width="30" height="30">
<path d="M0,5 30,5" stroke=#fff stroke-width="5"/>
<path d="M0,14 30,14" stroke=#fff stroke-width="5"/>
<path d="M0,23 30,23" stroke=#fff stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
×
Home
About
Services
Contact
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>
<script type="text/javascript">
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0px';
document.getElementById('side-menu').style.marginLeft = '0px';
}
</script>
</body>
</html>