Develop Reference

How to close CSS menu when clicking on links with JS?

So I made a pure CSS menu and everything looks how I want it, except for when clicking the links. In my single page layout clicking the links navigates to a section of the page, but upon clicking the link, it just smooth scrolls to the section and the menu remains visible. I have read multiple similar questions and none of the solutions have worked for me. I would prefer to use JavaScript and no jQuery.
My website is still in working progress; check it out to really see what happens on mobile size https://www.itsalaam.com/
Here is my code:
/* NAVIGATION */
.header {
width: 100%;
position: fixed;
top: 0;
background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
z-index: 999;
overflow: hidden;
/* transition: background .2s ease-out; */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header ul a {
display: block;
padding: 15px;
text-align: center;
color: rgb(224, 224, 224);
font-size: 1.7rem;
}
.header ul a:hover {
color: #fff;
}
.header .logo {
float: left;
display: block;
padding-top: 15px;
padding-left: 30px;
}
.header .logo img {
width: 50px;
transition: width .5s ease;
}
.header .menu {
clear: both;
float: right;
max-height: 0;
text-align: center;
width: 100%;
transition: max-height .2s ease-out;
transition: background 0.2s ease-out;
}
.header .menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
/*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
/*creates the middle bar of the nav-icon*/
background: #fff;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
background: #fff;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
top: 5px;
}
.header .menu-icon .nav-icon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
/* the ~ selects the next sibling */
max-height: 100vh;
background: #000;
z-index: 99;
transition: background 0.2s ease-out;
/*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
<header class="header">
<img src="/img/globeWireframe.png" alt="salaam" />
<input type="checkbox" class="menu-btn" id="menu-btn" />
<label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Resume
</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</header>

Use Javascript:
1. Get the checkbox to use it later.
2. Get all links in menu.
3. Add an event listener for each link to uncheck the checkbox on click, knowing that menu is displayen only when the checkbox is checked.
// Run once everything is loaded
window.onload = function() {
// Get the checkbox
let chk = document.getElementById('menu-btn');
// Get all menu links
let menuLinks = document.querySelectorAll('.menu li a');
// Loop on links
menuLinks.forEach(function(item) {
// Add event listener to each links
item.addEventListener('click', function() {
// When link is clicked, uncheck the checkbox to hide menu
chk.checked=false;
});
});
}
/* NAVIGATION */
.header {
width: 100%;
position: fixed;
top: 0;
background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
z-index: 999;
overflow: hidden;
/* transition: background .2s ease-out; */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header ul a {
display: block;
padding: 15px;
text-align: center;
color: rgb(224, 224, 224);
font-size: 1.7rem;
}
.header ul a:hover {
color: #fff;
}
.header .logo {
float: left;
display: block;
padding-top: 15px;
padding-left: 30px;
}
.header .logo img {
width: 50px;
transition: width .5s ease;
}
.header .menu {
clear: both;
float: right;
max-height: 0;
text-align: center;
width: 100%;
transition: max-height .2s ease-out;
transition: background 0.2s ease-out;
}
.header .menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
/*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
/*creates the middle bar of the nav-icon*/
background: #fff;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
background: #fff;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
top: 5px;
}
.header .menu-icon .nav-icon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
/* the ~ selects the next sibling */
max-height: 100vh;
background: #000;
z-index: 99;
transition: background 0.2s ease-out;
/*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
<header class="header">
<img src="/img/globeWireframe.png" alt="salaam" />
<input type="checkbox" class="menu-btn" id="menu-btn" />
<label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Resume
</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</header>

Removing class if screen is small than #px for sidebar?

Issue: When the screen is under 992px, the sidebar removes class, but this only happens if the screen is shrunk manually - not depending on the starting screen size.
How can i make it so if the screen is under 992px, the sidebar is not toggled unless clicked?
My javascript:
$(function(){
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$(window).resize(function(e) {
if($(window).width()<=992){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
});
});
View:
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a class="nav-link" href="/shouts">
<p>User</p>
</a>
</li>
<li>
<a class="nav-link" href="/seller">
<p>This</p>
</a>
</li>
<li>
<a class="nav-link" href="/analytics">
<p>Analytics</p>
</a>
</li>
</ul>
</div>
<div id="main">
...
<div id="page-content-wrapper">
...
</div>
<%= yield %>
</div>
</div>
</div>
I have tried this and it didn't work:
function checkWidthAndToggle() {
if($(window).width()<=992){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
}
$(window).on('resize load', checkWidthAndToggle);
CSS:
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
padding-top: 55px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: rgba(255, 0, 0, .79) ;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-left: 0px;
}
// .navbar .navbar-expand .navbar-dark .navbar-header .navbar-brand .navbar-center {
// display: block;
// text-align:center;
// float: none;
// vertical-align: top;
// }
#navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: white;
text-align: center;
}
.nav-color {
background: rgba(1, 0, 0, .79) ;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #fff;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:992px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-left: 0;
}
}
#media only screen and (max-width: 830px) {
.nav-remove-1 {
display: none;
}
}
#media only screen and (min-width: 830px) {
.side-show-1 {
display: none;
}
}
#media (max-width: 543px) {
.navbar-toggleable .navbar-nav .nav-item {
margin-right: 0;
}
}
#media (max-width: 767px) {
.navbar-toggleable-sm .navbar-nav .nav-item {
margin-right: 0;
}
}
#media (max-width: 991px) {
.navbar-toggleable-md .navbar-nav .nav-item {
margin-right: 0;
}
}
.center-just {
justify-content: center;
}
What's the correct code so when a screen is under 992px, the sidebar is closed on page load?

I don't really like this but it works.
You assigned a resize event, but actually you need to call the method onload to check actual size.
This does not explain why you media query is not working.
$(function(){
function checkWidthAndToggle() {
if($(window).width()<=992){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
}
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$(window).resize(checkWidthAndToggle);
// NOTE: We call it once to check during load.
checkWidthAndToggle();
});
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
padding-top: 55px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: rgba(255, 0, 0, .79) ;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-left: 0px;
}
// .navbar .navbar-expand .navbar-dark .navbar-header .navbar-brand .navbar-center {
// display: block;
// text-align:center;
// float: none;
// vertical-align: top;
// }
#navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: white;
text-align: center;
}
.nav-color {
background: rgba(1, 0, 0, .79) ;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #fff;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a class="nav-link" href="/shouts">
<p>User</p>
</a>
</li>
<li>
<a class="nav-link" href="/seller">
<p>This</p>
</a>
</li>
<li>
<a class="nav-link" href="/analytics">
<p>Analytics</p>
</a>
</li>
</ul>
</div>
<div id="main">
...
<div id="page-content-wrapper">
...
</div>
<%= yield %>
</div>
</div>
</div>

Trying to create a small website, new to html. Having trouble with div's

I just started working with html and download what I thought it was a simple template. Now I have been trying to add drop down menu and add 2 items to the right corresponding to register/login. I tried creating new divs, ul's... But it never seems to line up or items go missing.
#import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu ul {
background: #ffffff;
}
#cssmenu>ul>li {
float: left;
}
#cssmenu.align-center>ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center>ul>li {
display: inline-block;
float: none;
}
#cssmenu.align-right>ul>li {
float: right;
}
#cssmenu.align-right>ul>li>a {
margin-right: 0;
margin-left: -4px;
}
#cssmenu>ul>li>a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a,
#cssmenu>ul>li>a:hover {
color: #ffffff;
}
#cssmenu>ul>li>a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#cssmenu>ul>li.active>a:after,
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li>a:hover:after {
background: #47c9af;
}
#import url(http://fonts.googleapis.com/css?family=Raleway);
#logincssmenu,
#logincssmenu ul,
#logincssmenu ul li,
#logincssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#logincssmenu:after,
#logincssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#logincssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#logincssmenu ul {
background: #ffffff;
}
#logincssmenu>ul>li {
float: right;
}
#logincssmenu.align-center>ul {
font-size: 0;
text-align: center;
}
#logincssmenu.align-center>ul>li {
display: inline-block;
float: none;
}
#logincssmenu.align-right>ul>li {
float: right;
}
#logincssmenu.align-right>ul>li>a {
margin-right: 0;
margin-left: -4px;
}
#logincssmenu>ul>li>a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#logincssmenu>ul>li.active>a,
#logincssmenu>ul>li:hover>a,
#logincssmenu>ul>li>a:hover {
color: #ffffff;
}
#logincssmenu>ul>li>a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#logincssmenu>ul>li.active>a:after,
#logincssmenu>ul>li:hover>a:after,
#logincssmenu>ul>li>a:hover:after {
background: #47c9af;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 15px;
font-size: 15px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #47c9af;
display: block;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: rotateX(2deg);
transform-origin: bottom;
color: #ffffff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/loginstyle.css">
<link rel="stylesheet" href="css/dropdownstyle.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div id='logincssmenu'>
<ul>
<li><a href='#'>Login</a></li>
</ul>
</div>
</ul>
</div>
</body>
<html>
I also tried to mimic the style of the dropdown button by copy pasting some of the code from the original styles.css but with no good results. I started only a few days ago but I don't get why sometimes it disappears and disalligns.
Here is the original template. http://cssmenumaker.com/menu/flat-tabbed-menu

Put this in the first .I think this should do it.
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div id='logincssmenu'>
<li><a href='#'>Login</a></li>
</div>
Advice:If you are new to html&css,try to make some easy tutorials.Don't download a template beacuse you will not understand what's going on.

Swipe sidebar menu doesn't work in chrome

i did the menu from that template
https://www.jqueryscript.net/menu/Touch-Swipeable-Sidebar-Menu-with-jQuery-CSS3.html
but it work only in firefox/edge/safari(ios). and doesn't work in chrome/opera and other browsers
as i see in debug (F12) menu in chrome, after swipe js add "open-sidebar" class but menu didn't appear on the screen
what i did wrong?
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
#media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { left: 240px; }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
Об <span class="caret" ></span>
<ul class="sub-nav" class="col-sm-12">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>
By the way, when i was forming my snippet for i've found my mistake.
.container{
position:sticky;
}
I don't know why that works in firefox/edge/safari and pre-installed browser on my few android phones.

Use transfrom:
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
#media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-ms-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { transform: translate(240px, 0); }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
Об <span class="caret" ></span>
<ul class="sub-nav" class="col-sm-12">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>

For some reason, my footer isn't very mobile friendly

90% of my website is Mobile-Friendly (everything resizes and such), but for some reason my footer is being basically completely cut off on mobile.
The way I have it setup currently is exactly how I would like it to be setup. This is what it looks like on mobile:
$(function() {
$('.navigation .nav-toggle').on('click', function() {
$('.wrapper').toggleClass('open');
});
});
$(function() {
$('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() {
$('.navigation ul li').removeClass('active');
$(this).addClass('active');
});
});
$(function() {
$('.navigation ul li.home a').addClass('active');
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
align-items: center;
background: url("../images/bg.png") no-repeat;
background-size: cover;
}
html {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
.navigation {
width: 100%;
}
.navigation ul {
overflow: hidden;
color: white;
padding: 0;
text-align: right;
margin: 0;
margin-right: 15px;
}
.navigation ul li {
padding: 17px 12px;
display: inline-block;
}
.navigation ul li a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
.navigation ul li a:hover {
color: #00D5C2;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 115%;
display: block;
}
.side-nav {
position: fixed;
width: 220px;
height: 150vh;
background-color: #2D2D2D;
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.side-nav ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 0;
}
.side-nav ul li {
border-bottom: 1px solid gray;
border-width: 100%;
margin: 5px;
}
.outerwrapper {
height: 100vh;
display: block;
overflow-x: hidden;
position: relative;
}
.wrapper {
height: 100vh;
display: block;
transform: translateX(-100);
transition: transform 0.6s ease;
min-height: 100%;
position: relative;
}
.wrapper.open {
transform: translateX(220px);
background-color: rgba(84, 84, 84, 0.6);
}
.side-nav ul li a {
padding: 10px;
display: block;
color: gray;
text-decoration: none;
}
.side-nav ul li a:hover {
color: white;
text-decoration: none;
}
.side-nav.open {
transform: translateX(0);
}
.navigation .nav-toggle {
display: none;
float: left;
padding: 20px 30px 20px 30px;
cursor: pointer;
}
.footer {
margin-top: -5em;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(237, 237, 237, 0.2);
position: relative;
height: 70px;
z-index: -1;
}
.footerinfo {
margin-top: 20px;
}
.footerinfo p {
vertical-align: middle;
padding: 25px;
color: white;
text-align: center;
;
}
.navigation ul li a.active {
color: #00F0DB;
}
#logo img {
max-width: 100%;
height: auto;
width: auto\9;
display: block;
margin: 0 auto;
}
.footerlogo img {
margin-bottom: -65px;
margin-left: auto;
margin-right: auto;
}
.about-btn {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
font-size: 135%;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
width: auto;
display: block;
}
.about-btn a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
color: #3A9DA4;
border-radius: 9px;
padding: 10px 20px;
border: solid #3A9DA4 3px;
text-decoration: none;
font-size: 20px;
transition: all 0, 4s;
}
.about-btn li {
list-style-type: none;
margin: auto;
align-items: center;
width: 50%;
text-align: center;
}
.about-btn a:hover {
border-color: white;
color: white;
text-decoration: none;
font-size: 20px;
transition: scale(1, 1)
}
#media screen and (max-width: 700px) {
.navigation ul li {
display: none;
}
.navigation .nav-toggle {
display: inline;
}
.about-btn a {
font-size: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outerwrapper">
<div class="wrapper">
<div class="side-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div class="navigation">
<ul>
<li class="nav-toggle">&#9776</li>
<li class="home">Home</li>
<li class="repo">Repo</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div id="logo">
<img src="images/logo.png" alt="Squallz Logo">
</div>
<div class="about-btn">
<li>About Me</li>
</div>
</div>
<div class="footer">
<div class="footerinfo">
<p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p>
</div>
</div>
</div>

Try adding this in your css and view again in your mobileL
.outerwrapper {
height: 100%!important;
}

You need to set the css of the footer class to:
z-index: 999 !important;
position: fixed !important;
bottom:0 !important;
background-color: rgba(237, 237, 237, 0.2);