I try to make navigation menu in hamburger style...I made html, css and JS and everything is ok, but when I click link in menu, so menu doesn't hide and still is open. I need to hide menu when I click on link link
Really don't have idea why it doesn't work because for example toggle on cross is ok.
Here is CODE. HTML + JS are together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
background-color: #1d1d1d;
}
#about {
height: 100vh;
background-color: green;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<h1 class="logo">Try <span>it</span></h1>
<nav class="site-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js"></div>
<div id="about"></div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
</body>
</html>
I hope it will help you !
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
background-color: #1d1d1d;
}
#about {
height: 100vh;
background-color: green;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<h1 class="logo">Try <span>it</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js"></div>
<div id="about"></div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
});
$('.menu-link').click(function(){
$('.site-nav').toggleClass('close site-nav--open');
$('.menu-toggle').toggleClass('open')
});
</script>
</body>
</html>
I added new function which closes menu on .menu-link click.
I believe it solves your problem.
Snippet
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
background-color: #1d1d1d;
}
#about {
height: 100vh;
background-color: green;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<h1 class="logo">Try <span>it</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js"></div>
<div id="about"></div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$('.menu-toggle').toggleClass('open');
})
</script>
</body>
</html>
Related
I want the navbar to stay where it is without disappearing.
Here's my code:
var sideBar = document.getElementById('sidebar')
var menuIcon = document.getElementById('menu-icon')
function show() {
menuIcon.style.display = "none"
sideBar.style.display = "Block"
}
function hide() {
menuIcon.style.display = "inline"
sideBar.style.display = "none"
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
/*
Normal navbar on top of page
*/
body {
height: 1000vh;
}
.normal {
background-color: black;
position: fixed;
top: 0;
width: 100%;
}
.normal .normal-menu .menu-icon i {
font-size: 30px;
cursor: pointer;
transition: all 0.4s ease;
margin: 20px;
color: white;
}
.normal .normal-menu .menu-icon i:hover {
color: gray;
}
.normal .normal-menu .title {
position: absolute;
margin-top: 20px;
left: 50%;
transform: translate(-50%);
color: white;
font-size: 30px;
text-decoration: none;
}
/*sidebar styles*/
.sidebar {
background: black;
height: 100vh;
padding: 30px;
color: white;
width: 300px;
display: none;
transition: all 0.4s ease-in;
}
.sidebar .navbar .logo a {
text-decoration: none;
color: white;
font-size: 20px;
}
.sidebar .navbar .close-icon {
float: right;
font-size: 20px;
transition: all 0.4s ease;
cursor: pointer;
}
.sidebar .navbar .close-icon:hover {
color: gray;
}
.sidebar .navbar .menu {
margin-top: 100px;
}
.sidebar .navbar .menu li {
list-style: none;
border-radius: 10px;
padding: 20px;
cursor: pointer;
transition: all 0.4s ease;
}
.sidebar .navbar .menu li:hover {
background: white;
color: black;
}
.sidebar .navbar .menu li a {
color: inherit;
text-decoration: none;
}
<!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>Aaqil Abdullah</title>
<link rel="stylesheet" href="style.css" />
<link href="https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css" rel="stylesheet" />
</head>
<body>
<nav class="normal" id="normal">
<ul class="normal-menu" id="normal-menu">
<span class="menu-icon" id="menu-icon" onclick="show()"><i class="bx bx-menu"></i
></span>
Aaqil Abdullah
</ul>
</nav>
<aside class="sidebar" id="sidebar">
<nav class="navbar">
<span class="logo">Aaqil Abdullah</span>
<span class="close-icon" onclick="hide()"><i class="bx bx-x"></i></span>
<ul class="menu">
<li>Home</li>
<li>Projects</li>
<li>Interests</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</aside>
<div class="container">
</div>
<script src="script.js"></script>
</body>
</html>
It's happening because yourself are doing it, you need to remove these lines from your js
var menuIcon = document.getElementById('menu-icon');
menuIcon.style.display = "none";
menuIcon.style.display = "inline";
const sideBar = document.getElementById("sidebar");
function show() {
sideBar.style.display = "block";
}
function hide() {
sideBar.style.display = "none";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
/*
Normal navbar on top of page
*/
body {
height: 100vh;
}
.normal {
position: fixed;
top: 0;
width: 100%;
background: black;
}
.normal .normal-menu .menu-icon i {
font-size: 30px;
cursor: pointer;
transition: all 0.4s ease;
margin: 20px;
color: white;
}
.normal .normal-menu .menu-icon i:hover {
color: gray;
}
.normal .normal-menu .title {
position: absolute;
margin-top: 20px;
left: 50%;
transform: translate(-50%);
color: white;
font-size: 30px;
text-decoration: none;
}
/*sidebar styles*/
.sidebar {
position: fixed;
display: none;
background: black;
height: 100vh;
width: 300px;
padding: 30px;
top: 0;
left: 0;
color: white;
transition: all 0.4s ease-in;
}
.sidebar .navbar .logo a {
text-decoration: none;
color: white;
font-size: 20px;
}
.sidebar .navbar .close-icon {
float: right;
font-size: 20px;
transition: all 0.4s ease;
cursor: pointer;
}
.sidebar .navbar .close-icon:hover {
color: gray;
}
.sidebar .navbar .menu {
margin-top: 100px;
}
.sidebar .navbar .menu li {
list-style: none;
padding: 20px;
border-radius: 10px;
cursor: pointer;
transition: all 0.4s ease;
}
.sidebar .navbar .menu li:hover {
color: black;
background: white;
}
.sidebar .navbar .menu li a {
color: inherit;
text-decoration: none;
}
<link href="https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css" rel="stylesheet" />
<nav class="normal" id="normal">
<ul class="normal-menu" id="normal-menu">
<span class="menu-icon" id="menu-icon" onclick="show()"><i class="bx bx-menu"></i></span>
Aaqil Abdullah
</ul>
</nav>
<aside class="sidebar" id="sidebar">
<nav class="navbar">
<span class="logo">Aaqil Abdullah</span>
<span class="close-icon" onclick="hide()"><i class="bx bx-x"></i></span>
<ul class="menu">
<li>Home</li>
<li>Projects</li>
<li>Interests</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</aside>
I have an HTML page with a sidebar. The sidebar is shown when i click 'Upload Data' button. When I resize the window, the sidebar's header (random portion from top) goes beyond the screen and the only way to retrieve is to refresh the page to start fresh. I need a solution for keeping the sidebar inside the window.
Initial body image
After resizing
HTML CODE
HEAD
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://www.pngkit.com/png/full/327-3270091_demographic-icon-sign.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sidebar_style_final.css') }}">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<style>
.fa {
margin-left: -8px;
margin-right: 8px;
}
.bs-example {
margin: 20px;
}
html{
margin:0;
height:100%;
}
</style>
sidebar_style_final.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 450px;
position: fixed;
top: 0;
right: -450px;
height: 100%;
z-index: 999;
background: #ffffff;
color: #r45;
transition: all 0.3s;
overflow: auto;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
right: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #7386D5;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#dismiss:hover {
background: #fff;
color: #7386D5;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
BODY
<body onload="start_nav()" onresize="change_sidebar()">
<div class="grey_bound" id="grey_bound"></div>
<div class="wrapper">
<!-- Sidebar -->
<div id="sidebar">
<div id="dismiss" style="left: 30px; top: 20px;" onclick="hide_grey_bound()">
<i class="fas fa-arrow-right" onclick="hide_grey_bound()"></i>
</div>
<div class="sidebar-header" align="right">
<h3>Upload new data</h3>
</div>
<br/>
<div class="bs-example" style="width:400px;position:relative;left:10px;">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#shp_files" class="nav-link" data-toggle="tab" id='new_tab'>Shape Files</a>
</li>
<li class="nav-item">
Category Files
</li>
</ul>
<div class="tab-content" id="tab_content" style="height: 600px; overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>
</div>
</div>
<!-- Page Content -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info" style="position: relative;float: right;right: 10px;" onclick="function show_grey_bound() { document.getElementById('grey_bound').style.display = 'block'; }
show_grey_bound()">
<i class="fas fa-caret-square-up"></i>
<span>Upload Data</span>
</button>
</div>
</div>
</body>
SCRIPT
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
I have already tried
setting document.getELementById('sidebar').scrollTop = 0 onresize of
body.
changing the top of the sidebar onresize.
to give margin-top to 0.
Can anyone help me with this. Like I said, I need the side bar to stay inside.
You can remove the height in your Sidebar content div
<div class="tab-content" id="tab_content" style="overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>
I am trying to embed google maps in the website using iframes. I need this map to be fullscreen on any device when the map is shown. I can't figure out a way to do this, tried setting width and height to 100% which made it look like this ):
But right now my website looks like this:
Any way of making the map fullscreen?
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
sorry i cant really get into adjusting your css right now but here is a little something i came up with when i need to output YouTube videos in iframes. try it out
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
/*to adjust the height and width*/
margin-right: 20%;
margin-left: 20%;
margin-top: 20%;
margin-bottom: 20%;
/*or you can use it in single line*/
margin:20%;
/*or if you want different margins for different sides in a single line*/
margin: 20% 20% 20% 20%;
/* the above means margin: top right bottom left; */
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*instead of using margin just add a div and specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
just replace your <div class="box"></div> with the code above let me know how it turns out.
How about the following example. The solution came from Responsive iframe (google maps) and weird resizing. By tweaking padding-top and padding-bottom you can change the size.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
.box {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
overflow: hidden;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
You can also try and use CSS variables:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
let events = ['load', 'resize'];
let googleMaps = document.querySelector('.box iframe');
events.forEach( event => {
window.addEventListener(event, () => {
googleMaps.style.setProperty('--google-maps-height', `${window.innerHeight}px`);
});
});
.box {
height: 100%;
}
.box iframe {
width: 100%;
height: var(--google-maps-height);
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</body>
</html>
Are you looking for something like this? Add the following code to your css and see if it does the trick.
iframe {
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
Take a look at using viewport percentage
I recently implemented an automatic slider code for my slider in my website, however, it's not working for some reason. The code for the slider animation in the CSS style sheet is near the bottom. I was wondering if anybody could help me in solving the problem with my code.
Here is a picture of my slider, just want the images of the bikes to move automatically.
HTML:
<!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>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slider">
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbers">1 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-1.jpg"></div>
<div class="caption">Kona Lanai 27.5" 2018 Mountain bike</div>
</div>
<div class="myslides fade">
<div class="numbers">2 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-2.jpg"></div>
<div class="caption">Decathlon B'twin Rockrider 520S Full Suspension Mountain Bike</div>
</div>
<div class="myslides fade">
<div class="numbers">3 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-3.jpg"></div>
<div class="caption">Ribble Aero 883 Carbon Road Bike - Matte Black</div>
</div>
<div class="myslides fade">
<div class="numbers">4 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-4.jpg"></div>
<div class="caption">Lapierre Overvolt AM700i</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dots");
if (n > slides.length) { slideIndex = 1};
if (n < 1) { slideIndex = slides.length};
for (i=0;i<slides.length;i++) {
slides[i].style.display = "none";
};
for (i=0;i<dots.length;i++) {
dots[i].className = dots[i].className.replace(" active","");
};
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<div class="content">
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
body{
font-family: verdana,sans-serif;
margin: 0;
}
.slideshow-container{
width: 100%;
position: relative;
margin: auto;
}
.numbers{
position: absolute;
top: 0;
color: #f2f2f2;
padding: 8px 12px;
font-size: 12px;
}
.myslides{
display: none;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
border-radius: 0 3px 3px 0;
color: black;
cursor: pointer;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
background-color: rgba(0,0,0,0.8);
}
.caption{
text-align: center;
position: absolute;
bottom: 8px;
width: 100%;
color: black;
font-size: 15px;
padding: 8px 22px;
left:-2%;
}
.dots{
width: 13px;
height: 13px;
background: gray;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
#keyframes fade{
from {opacity: 0.4;}
to {opacity: 1;}
}
.active, .dot:hover {
background-color: #333;
}
.slider-pic {
display: grid;
height: 100%;
z-index:0;
}
.Fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
z-index:0;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left: 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -300%;
}
100%{
left: -400%;
}
}
#slider {
overflow: hidden;
}
#slider figure img {
width:20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin:0;
left:0;
animation: 20s slider infinite
}
Add this instruction in your JS code:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
Herem the method slidePlus is called every 1000ms
Can someone explain me why, when I open menu (which is fullwidth), so that menu is not overlapping h1. I tried <span> and <span> was OK, when I want h1, h2... it doesn't work.
After menu open I can see it. Also I tried z-index on menu and nothing and same I did with h1, but still nothing.
Here is the code as CSS+HTML (with JS):
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
background-color: #1d1d1d;
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
}
#about {
height: 100vh;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
h1.main {
color: white;
position: absolute;
top: 50%;
left: 5%;
font-size: 5em !important;
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<header>
<div class="container">
<h1 class="logo">Panco <span>design</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js">
<h1 class="main">Hi</h1>
</div>
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 250);
$('.menu-toggle').toggleClass('open');
})
$(function($) {
$('a').on('click', function(e) {
var $anchor = $(this).attr("href");
var $hrefStart = $anchor.substr(0, 1);
if ($hrefStart == "#") {
$('html,body').animate({
scrollTop: $($anchor).offset().top
}, 1500, 'easeInOutExpo');
e.preventDefault();
} else {
window.location.href = $anchor;
}
});
})(jQuery);
</script>
</body>
</html>
Your shared code was a mess. Tried to clean it up a bit.
Anyway, the problem is that your menu is inside header. Even if you give the menu z-index, if the header has no z-index , the menu won't show on top of other elements.
So add z-index:9999 or something like that to the header.
See below
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 250);
$('.menu-toggle').toggleClass('open');
})
$('a').on('click', function(e){
var $anchor = $(this).attr("href");
var $hrefStart = $anchor.substr(0, 1);
if ( $hrefStart == "#" ) {
$('html,body').animate({
scrollTop: $($anchor).offset().top
}, 1500, 'easeInOutExpo');
e.preventDefault();
} else {
window.location.href = $anchor;
}
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
background-color: #1d1d1d;
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%;
z-index: 999;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
}
#about {
height: 100vh;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
h1.main {
color: white;
position: absolute;
top: 50%;
left: 5%;
font-size: 5em !important;
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<h1 class="logo">Panco <span>design</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js">
<h1 class="main">Hi</h1>
</div>
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
If you just add z-index: -1; to h1.main then this issue will be resolved and you don't need to do anything else. z-index: -1; can be set to negative values which is used to lower the priority of selector. Read CSS - z-index for more detail.
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
$('.menu-link').click(function() {
$('.site-nav').toggleClass('site-nav--open', 250);
$('.menu-toggle').toggleClass('open');
})
$('a').on('click', function(e){
var $anchor = $(this).attr("href");
var $hrefStart = $anchor.substr(0, 1);
if ( $hrefStart == "#" ) {
$('html,body').animate({
scrollTop: $($anchor).offset().top
}, 1500, 'easeInOutExpo');
e.preventDefault();
} else {
window.location.href = $anchor;
}
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
header {
background-color: #1d1d1d;
color: #EBEBD3;
padding: 1em 0;
position: fixed;
width: 100%;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
position: relative;
left: 5%;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
background-color: #1d1d1d;
top: 100%;
right: 0;
height: 0px;
overflow: hidden;
transition: .5s ease-in-out;
opacity: 0;
width: 100%;
}
.site-nav--open {
height: auto;
opacity: 100;
}
.site-nav ul {
padding: 0;
list-style: none;
margin: 0;
}
.site-nav li {
width: 100%;
text-align: center;
/* border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/* border-bottom: none; */
}
.site-nav a {
font-weight: 800;
font-size: 40px;
color: #9E9E9E;
text-decoration: none;
display: block;
padding: 2em;
text-transform: uppercase;
z-index: 99999;
}
.site-nav a:hover,
.site-nav a:focus {
color: white;
}
.menu-toggle {
position: fixed;
padding: 1em;
position: absolute;
right: .75em;
top: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background-color: #ebebbd;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: .5s ease-in-out;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(90deg);
}
.open .hamburger {
transform: rotate(45deg);
}
#particles-js {
height: 100vh;
}
#about {
height: 100vh;
}
#portfolio {
height: 100vh;
background-color: blue;
}
#contact {
height: 100vh;
background-color: red;
}
h1.main {
color: white;
position: absolute;
top: 50%;
left: 5%;
font-size: 5em !important;
z-index: -1;
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<h1 class="logo">Panco <span>design</span></h1>
<nav class="site-nav">
<ul>
<li><a class="menu-link" href="#particles-js">Home</a></li>
<li><a class="menu-link" href="#about">About</a></li>
<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
<li><a class="menu-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div id="particles-js">
<h1 class="main">Hi</h1>
</div>
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>