Icons not Appearing and Animation not Working - javascript

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.

Related

Javascript navigation button, data-visible class problem

guys! I have some problems with my script. It's with my navigation button which if you press the tab should be coming up. I don't get any error codes. Could I get some help? It does give me value back in the console "true" or "false". I think the problem is not with the javascript more like with CSS or HTML. Thank you in advance!
const primaryNav = document.querySelector(".nav-items");
const navToggle = document.querySelector(".mobile-nav-toggle");
navToggle.addEventListener("click", () => {
const visibility = primaryNav.getAttribute("data-visible");
if(visibility === "false"){
primaryNav.setAttribute("data-visible", true);
navToggle.setAttribute("aria-expanded", true);
} else if (visibility === "true"){
primaryNav.setAttribute("data-visible", false);
navToggle.setAttribute("aria-expanded" , false);
}
});
html,body{
margin: 0%;
box-sizing: border-box;
background-image: url(../assets/Coding2.jpg);
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
}
/*-------Global Classes ------*/
a{
text-decoration: none;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul{
list-style-type: none;
}
/* -------navbar-------*/
.nav{
padding: 0 2rem;
height: 0rem;
min-height: 15vh;
overflow: hidden;
}
.nav .nav-brand a{
font-size:2rem;
padding:1rem 1.5rem;
position:relative;
top: 15%;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .nav-items{
list-style-type: none;
display: flex;
margin: 0;
align-items: center;
justify-content: space-between;
}
.nav .nav-menu{
justify-content: space-between;
}
.nav .nav-items .nav-link{
padding: 1rem 1.5rem;
position: relative;
font-size: 1.1rem;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .social{
padding:1.4rem 0;
}
.nav .nav-items a{
text-decoration: none;
color: white;
font-family: Arial, "Time New Roman";
}
.mobile-nav-toggle{
display: none;
}
.nav .nav-items a > [aria-hidden="true"]{
font-weight: 700;
margin-inline-end: 0.75rem;
}
#media (max-width: 35em){
.nav .nav-brand a{
right: 30%;
font-size: 1.5rem;
}
.nav .nav-items{
--gap: 2em;
position: fixed;
z-index: 1000;
inset: 0 0 0 30%;
flex-direction: column;
padding: min(20vh, 10rem) 2em;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
transform: translateX(100%);
}
.nav .nav-times[data-visible="true"]{
transform: translateX(0%);
}
.mobile-nav-toggle{
display: block;
position: absolute;
background: url(../assets/icon-hamburger.svg);
background-repeat: no-repeat;
border: 0;
z-index: 9999;
width: 2rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
font-size: 0;
}
}
/* ---X---navbar---X---*/
<!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>Computer Science Website</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<script src="./js/main.js" defer></script>
<button class="mobile-nav-toggle" aria-controls ="nav-items" aria-expanded ="false"><span class="sr-only">Menu</span></button>
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
CBlogging
</div>
<div>
<ul id = "nav-items" data-visible = "false" class="nav-items flex">
<li class ="nav-link">
<span aria-hidden="true">00</span>Home
</li>
<li class ="nav-link">
<span aria-hidden="true">01</span>Contact
</li>
<li class ="nav-link">
<span aria-hidden="true">02</span>Article
</li>
<li class ="nav-link">
<span aria-hidden="true">03</span>Home
</li>
</ul>
</div>
<!---
<div class="social text-gray">
F
I
T
Y
</div>
-->
</div>
</nav>
</body>
</html>
First step is change background-color like:
body {
background-color: #252525;
}
Now in button change font-size to example 17px:
.mobile-nav-toggle {
font-size: 17px;
}
Second and last step is change name of css atribute .nav-times to .nav-items:
.nav .nav-items[data-visible='true'] {
transform: translateX(100%);
}
That's it. Your welcome :)

class text-content set into class slider but it is pushed down?

I am coding a very simple HTML CSS program and here is my problem.
I made a picture in id named slider, and I want to write some text into it. And as the tutorial, I wrote a class named text-content in the slider. Very easy to understand, right?
Here is all of my index.html code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-repeat;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!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="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<div class="text-description">We had the best time playing at Venice Beach!</div>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
That is all of my code.
Here is the tutorial's picture, as you can see, the text is in the picture
Because when I click on the picture, it said to me that it is in the slider.
As you can see in this picture
I thought that if the picture is in the slider, and the text-content is in the slider, the text-content must in the picture?
My question is, I put class text-content in id slider, but the class text-content is pushed down, as you can see in this picture
Could you please explain this problem to me? Thank you very much for your time.
I assume you want to make a Hero Image. You can move the text position up.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80') top center / cover no-repeat;
}
#slider .text-content{
position: absolute;
bottom: 25%;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!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="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<p class="text-description">We had the best time playing at Venice Beach!</p>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
As you question that you want to create a hero image section and you facing some design issue. so you have to look for CSS properties that should you've to use. If you want a demo section like that then I can suggest you check this manual.
https://www.w3schools.com/howto/howto_css_hero_image.asp
You can redesign your section as you want.
For the #slider div, use display:inline-block:
#slider{display:inline-block}

nav bar dissapears(in full size window) after using the menu button in mobile size

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>

How to make menu slide from Viewport to the Header

I am learning (just began) jQuery and now I want to make a menu like on this site
I mean, I want the menu to slide down out of the viewport to the header, just like in template in the link.
I tried to look at jQuery API documentation, some videos on YT about menus etc, but I did not find anything relevant.
Can anyone please learn me, how to do this?
Thank you very much
PS: I just have this:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
Use translateY(); css class and jQuery to toggle classes.
This code snippet should get you where you need to be! It will need a bit of editing to fit your needs.
I've added a div called .offsite-canvas that houses your "offscreen" container. When you press the menu toggle button, jQuery toggles a class that puts the offscreen container in view for the user.
$( ".menu-toggle" ).click(function() {
$(".offsite-canvas").toggleClass("open");
});
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}
.offsite-canvas.open {
position: relative;
transform: translateY(0);
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="offsite-canvas">
<ul class="offcanvas">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
I would suggest if you want to make a nav menu that comes onto the screen when a button is clicked, create the menus as normal, and then place it off the screen on either the left or the right by using translateX() in css.
From that point on, when the button is clicked, Toggle a class that would translate the menu one the x axis so that it is visible.

Responsive side menu

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>

Categories