We Keep Coding

Sidebar going beyond screen on resize

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>

Bootstrap - collapsed sidebar by default

I have a project based on bootstrap 3.3.7. What I'm trying to achieve is to have a toggle button connected to sidebar. So when a user clicks the button, a sidebar shows from the left. This is the code which I currently have:
HTML:
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Test</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Back to the article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
</button>
<div class="container-fluid">
<h2>Collapsible Sidebar Using Bootstrap 3</h2></div></div>
JS:
$(document).ready(function() {
$("#sidebarCollapse").on("click", function() {
$("#sidebar").toggleClass("active");
$(this).toggleClass("active");
});
});
CSS:
.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
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar.active {
margin-left: -250px;
}
#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;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
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 {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
The code works but I do have an issue - I want to have the sidebar hidden all the time. So only a click on the button shows it. I have went through a bootstrap docs yet there is no class/info how to enhance this code with such functionality.
thanks for any hints..

I think that you have switch the parameter of active class, if so you can also eliminate the last mediaquery . Try this
.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
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar {
margin-left:-250px;
}
#sidebar.active {
margin-left: 0;
}
#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;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
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 {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}

Make the content fit the width of the window

I am a complete noob in making designs. However, I am trying to build a landing page with a mockup from dribbble. Everything was looking okay until I tried to make it responsive. The width of the elements doesn't fit the width of the screen when the screen width is less than 840 px or so
This is the image of the page when the width is less than 840px.
This the image of the page when the screen is greater than 840px
I would be more than grateful if anyone could guide me here or point out what exactly is wrong.
HTML
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: rgb(243, 145, 161);
--secondary-color: rgb(60, 60, 146);
--heading-font: 'Jomolhari', serif;
--body-font: 'Roboto', sans-serif;
--body-text-color: rgb(151, 151, 151);
}
html {
font-size: 10px;
font-family: var(--body-font);
color: var(--body-text-color);
scroll-behavior: smooth;
}
.container {
width: 100%;
max-width: 165.5rem;
margin: 0 auto;
padding: 0 2.4rem;
}
a {
text-decoration: none;
color: var(--body-text-color);
}
p {
font-size: 1.4rem;
}
section {
padding: 3.9rem 0;
}
img {
width: 100%;
height: 100%;
}
/* Header */
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.logo {
font-size: 2.5rem;
font-weight: 600;
color: var(--primary-color);
font-family: var(--heading-font);
}
.nav {
height: 7.2rem;
padding: 0 6rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.nav-list {
list-style: none;
display: flex;
}
.list-items {
margin: 0 1.5rem;
position: relative;
}
.nav-link {
text-decoration: none;
text-transform: uppercase;
font-size: 1.5rem;
color: var(--body-text-color);
transition: color .1s;
}
.nav-link::after {
content: '';
height: 2px;
width: 0;
position: absolute;
left: 0;
bottom: 0;
background-color: var(--secondary-color);
transition: width .5s ease 0s;
}
.nav-link:hover,
.nav-link:hover::after {
width: 100%;
color: var(--secondary-color);
}
/* header ends */
/* hero section */
#hero {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
padding: 0 6rem;
background: linear-gradient(to bottom, rgb(247, 202, 210), transparent);
background-size: cover;
}
.global-headline {
color: var(--secondary-color);
font-family: var(--heading-font);
font-size: 5.5rem;
}
#hero p {
font-size: 2rem;
margin: 3rem auto;
}
.btn {
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
color: white;
background-color: var(--primary-color);
font-size: 1.2rem;
padding: 1.5rem 5rem;
border-radius: 30px;
}
.btn:hover,
.btn:focus {
box-shadow: 0 0 25px var(--primary-color);
}
<!-- Header starts -->
<header>
<div class="container">
<nav class="nav">
Plant<i class="fas fa-fan fa-fw"></i>Bloom
<ul class="nav-list">
<li class="list-items">
Home
</li>
<li class="list-items">
About
</li>
<li class="list-items">
Shop
</li>
<li class="list-items">
Contact
</li>
<li class="list-items">
<i class="fas fa-shopping-bag fa-fw"></i>
</li>
</ul>
</nav>
</div>
</header>
<!-- Header ends -->
<!-- hero section -->
<section id="hero">
<div class="container">
<div class="global-headline">
<h2>Fresh Flower,</h2>
<h2>Perfect Gifts</h2>
</div>
<p>Send flower for someone you love</p>
SHOP NOW
</div>
</section>

Use Media Queries for responsiveness of the site, Try Below Code!
/* Mobile first */
.container {
}
/* 840px and above */
#media all and (min-width: 840px) {
.container {
}
}
Learn more about CSS #media
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

html sidebar display button inline

I am making a new html/css sidebar for site navigation, It currently collapses when the page gets too small. I am trying to make an 'M' button that when you click it will collapse / expand the sidebar. I have the button added (id='sideButton') but the button floats below my 'Website Title' text like so:
Website Title
( M )
About
Home
And I am trying to use css/html to style the button to appear right next to my 'Website Title' text like so:
Website Title ( M )
About
Home
I have my button placed right next to the element, but it doesnt align right next to my text? How can I change the css to style my ( M ) button like so? I tried display:inline but it did not change
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel='icon' href='{{ icon }}' type='image/x-icon' />
<title>{{ pageTitle }}</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<!-- Style -->
<style>
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #ffffff;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
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
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #f7f9fb; /* NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#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;
}
.currentPage, .currentPage *{
background: #bed6b8 !important;
}
#sidebar ul li a:hover {
color: #000;
background: #8FC1E3; /* hover tab color */
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
/* color: #fff; */
background: #f7f9fb; /* active tab */
}
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: #f7f9fb; /* tab list color */
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
/* Sidebar expand/collapse button */
#sidebutton {
margin-left: 100%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Website Title</h3> <button id='sidebutton'>M</button>
</div>
<ul class="list-unstyled components">
<li class="currentPage" >
<a href="#" >Home</a>
</li>
<li>
About
</li>
</ul>
</nav>
</div>
</html>

$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #ffffff;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
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
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #f7f9fb; /* NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#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;
}
.currentPage, .currentPage *{
background: #bed6b8 !important;
}
#sidebar ul li a:hover {
color: #000;
background: #8FC1E3; /* hover tab color */
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
/* color: #fff; */
background: #f7f9fb; /* active tab */
}
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: #f7f9fb; /* tab list color */
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
/* Sidebar expand/collapse button */
#sidebutton {
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel='icon' href='{{ icon }}' type='image/x-icon' />
<title>{{ pageTitle }}</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Website Title</h3> <button id='sidebutton'>M</button>
</div>
<ul class="list-unstyled components">
<li class="currentPage" >
<a href="#" >Home</a>
</li>
<li>
About
</li>
</ul>
</nav>
</div>
</html>

You could make .sidebar-header a flex container:
.sidebar-header {
display: flex;
}
And at this point removing margin-left: 100%; from the "M" button should do the trick. From here you can adjust it as you like

Javascript dropdown menu not working

I'm trying to create dropdown menu that will open and collapse when the "mobile-nav" button gets clicked.
Please see this video or website as examples of the intended behavior:
https://www.youtube.com/watch?v=ozOSV75DgzU
http://travisneilson.com/
function mobileNav() {
$('.mobile-nav-toggle').on('click', function() {
var status = $(this).hasClass('is-open');
if (status) {
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
} else {
$('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
}
});
}
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
text-align: justify color: #fff;
font-family: 'Lato', 'arial', sans-serif;
font-size: 19px;
font-weight: 400;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* REUSABLE COMPONENTS */
/* ------------------------------------------ */
.row-basic {
max-width: 1216px;
}
.main-container {
max-width: 1216px;
margin: 0 auto;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
.mobile-nav {
display: ;
position: ;
width: 1216px;
background: white;
padding: 31px 0px 21px;
transform: translateY(-100%);
transition: all 0.3s ease-in-out
}
.mobile-nav.is-open {
display: block;
transform: translateY(0%);
}
.mobile-nav ul {
list-style: none;
}
.mobile-nav ul li {
text-align: center;
margin-bottom: 10px;
}
.mobile-nav ul li a:link,
.mobile-nav ul li a:visited {
color: #999;
text-decoration: none;
text-transform: uppercase;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display: flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display: flex;
align-items: center;
}
nav ul {
display: flex;
}
.main-nav {
list-style: none;
}
.main-nav li {
display: inline-block;
line-height: 31px;
border-right: 1px solid rgba(255, 255, 255, 0.24);
padding-right: 9px;
padding-left: 9px;
margin-right: 0px;
width: auto;
}
.main-nav li:last-child {
border-right: hidden;
margin-right: 31px;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.user-tools {
display: flex;
align-items: center;
}
.user-tools:focus {
outline: none;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<script src="resources/js/functions.js"></script>
</head>
<body>
<div class="main-container">
<div class="mobile-nav is-open">
<ul>
<li>Menu
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>About Me
</li>
</ul>
</div>
<header class="row-basic">
<nav>
<ul class="main-nav">
<li>Menu
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>About Me
</li>
</ul>
</nav>
<div class="user-tools">
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
</html>

You have to add link to jQuery script.
Delete declaration function mobileNav() { and it closing braket }.
$('.mobile-nav-toggle').on('click', function() {
var status = $(this).hasClass('is-open');
if (status) {
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
} else {
$('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
}
});
Here is example of working code https://jsfiddle.net/efjz40ob/