SideBar navigation collapse shows blank screen when bootstrap 4 css loaded

SideBar navigation collapse shows blank screen when bootstrap 4 css loaded - javascript

I am trying to do side navigation bar with collapse. so that I have included jquery 3.4.1 and CSS. But When Bootstrap 4 css and Bootstrap js added page turns into white screen. In console there will be no error. After removing bootstrap it is working fine.But bootstrap is essential. So that JS, CSS, JSP has been included for your reference. Please help me in this.
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background: #e1ecf2;
}
.wrapper{
margin: 10px;
}
.wrapper .top_navbar{
width:84%;
height: 60px;
display: flex;
position: fixed;
top: 10px;
transition: all 0.3s ease;
}
.wrapper.collapse .top_navbar{
width: 92.5%;
height: 60px;
display: flex;
position: fixed;
top: 10px;
}
.wrapper .top_navbar .hamburger{
width: 70px;
height: 100%;
background: #33AAAA;
padding: 25px 25px;
/* border-top-left-radius: 20px; */
cursor: pointer;
}
.wrapper . .hamburger div{
width: 35px;
height: 4px;
background: #92a6e2;
margin: 5px 0;
border-radius: 5px;
}
.wrapper .top_navbar .top_menu{
width: 100%;
height: 100%;
background: linear-gradient(to right,#33AAAA,#80C477);
/* border-top-right-radius: 20px; */
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wrapper .top_navbar .top_menu .logo{
color: white;
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.wrapper .top_navbar .top_menu ul{
display: flex;
}
.wrapper .top_navbar .top_menu ul li a{
display: block;
margin: 0 10px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid white;
border-radius: 50%;
color: white;
}
.wrapper .top_navbar .top_menu ul li a:hover{
background: #4360b5;
color: #fff;
}
.wrapper .top_navbar .top_menu ul li a:hover i{
color: #fff;
}
.wrapper .sidebar{
position: fixed;
left: 10px;
background: linear-gradient(#80C477,#33AAAA);;
width: 200px;
height: calc(100% - 20px);
/* border-bottom-left-radius: 20px; */
transition: all 0.3s ease;
margin-top: -60px
}
.wrapper .sidebar ul li a{
display: block;
padding: 20px;
color: #fff;
position: relative;
margin-bottom: 1px;
color: white;
white-space: nowrap;
}
.wrapper .sidebar ul li a:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: #92a6e2;
display: none;
}
.wrapper .sidebar ul li a span.icon{
margin-right: 10px;
display: inline-block;
}
.wrapper .sidebar ul li a span.title{
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
background: #4360b5;
color: #fff;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
.wrapper .main_container{
width: (100% - 200px);
margin-top: 70px;
margin-left: 200px;
padding: 15px;
transition: all 0.3s ease;
}
.wrapper .main_container .item{
background: #fff;
margin-bottom: 10px;
padding: 15px;
font-size: 14px;
line-height: 22px;
}
.wrapper.collapse .sidebar{
width: 70px;
}
.wrapper.collapse .sidebar ul li a{
text-align: center;
}
.wrapper.collapse .sidebar ul li a span.icon{
margin: 0;
}
.wrapper.collapse .sidebar ul li a span.title{
display: none;
}
.wrapper.collapse .main_container{
width: (100% - 70px);
margin-left: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Side Navigation Bar</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar" >
<ul>
<li>
<li>
<li><a href="#"> <span class="icon"><i
class="fas fa-book"></i></span> <span class="title">Books</span></a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-file-video"></i></span> <span class="title">Movies</span>
</a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-volleyball-ball"></i></span> <span class="title">Sports</span>
</a></li>
<li><a href="#" class="active"> <span class="icon"><i
class="fas fa-blog"></i></span> <span class="title">Blogs</span>
</a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-leaf"></i></span> <span class="title">Nature</span>
</a></li>
</ul>
</div>
<div class="main_container">
<div class="top_navbar" >
<div class="hamburger" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<i class="fas fa-bars"></i>
</div>
<div class="top_menu">
<div class="logo">logo</div>
<ul>
<li> <i class="fas fa-search"></i></li>
<li><a href="#"> <i class="fas fa-bell"></i>
</a></li>
<li><a href="#"> <i class="fas fa-user"></i>
</a></li>
</ul>
</div>
</div>
<div id ="Home">
<jsp:include page="Home.jsp"/>
</div>
</div>
</div>
</body>
</html>
problem comes if the below line added
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I tried without bootstrap css it is working fine.But the bootstrap css is essential.

Put your scripts in this order and don't forget to put important rules to your css which might be overriding some default bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>

Related

Responsive collapsible sidebar using bootstrap

I want to build a sidebar like W3 Schools website. For example if the screen max-width will 456px then sidebar will be hide and a menu icon would display. On click of menu icon sidebar will open.
enter image description here
Here is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: arial;
}
/* body{
width: 100%;
min-height: 100vh;
} */
.navbar {
top: 0px;
left: 20px;
position: fixed;
width: 250px;
height: 100%;
background: #FFFFFF;
}
.navbar-brand {
float: left;
text-decoration: none;
font-size: 19px;
padding: 0.2em 0.7em;
color: white
}
.navbar .navbar-nav .nav-item {
display: inline;
}
.navbar .livestock-logo {
background: white;
margin-left: auto;
margin-right: auto;
margin-top: 1px;
width: 60%;
}
.navbar ul li:hover {
background: #3f612e;
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important
}
.navbar ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 20px;
}
.navbar ul li {
display: flex;
left: 10px;
padding: 10px;
border-top: 1px solid rgb(235, 232, 232);
}
.navbar ul li a {
text-align: left;
padding-left: 25px;
font-size: 0.8em !important;
color: #000000;
display: block
}
.navbar ul li a .fas {
width: 20px !important
}
.navbar ul li a .far {
width: 20px !important
}
.navbar-nav .nav-item a {
text-decoration: none;
display: inline-block;
font-size: 14px;
}
.navbar ul li a:hover {
color: #fff;
text-decoration: none
}
.toggle-collapse {
float: left;
width: 45px;
height: 32px;
background-color: transparent;
/* color: white; */
border: 1px solid blue;
border-radius: 3px;
cursor: pointer;
display: none;
}
toggle-collapse:hover {
color: white
}
#media screen and (max-width:456px) {
.navbar-brand {
display: inline-block;
float: none;
}
.toggle-collapse {
display: inline-block;
}
.navbar-nav {
color: white;
padding: 0%;
}
.navbar .navbar-nav .nav-item {
display: block;
list-style: none;
}
.navbar-collapse {
width: 100%;
overflow: hidden;
text-align: left;
height: 0vh;
transition: all 499ms ease;
}
.collapse {
height: 100vh;
}
}
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
body {
background: rgb(247, 247, 247) !important;
}
</style>
<head>
<meta charset="UTF-8"> {% load static %}
<meta name="viewport" content="device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<link rel="stylesheet" type="text/css" href="../static/css/responsive.css" />
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!-- <div>
<button class="toggle-collapse">
<img src="../static/images/toggle.png">
</button>
</div> -->
<nav>
<div class="navbar">
<button class="toggle-collapse">
<img src="../static/images/toggle.png">
</button>
<div class="navbar-collapse">
<div class="livestock-logo">
<img src="../static/images/livestock.png" alt="livestock">
</div>
<ul class="navbar-nav">
<li class="nav-item">
<img src="../static/images/home.png"> Home
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Index
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Users
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Companies
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Logout
</li>
<li class="nav-item">
<img src="../static/images/search.png"> Search
</li>
</ul>
</div>
</div>
</nav>
</body>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.toggle-collapse').click(function() {
$('.navbar-collapse').toggleClass("collapse");
})
})
</script>
</html>
I am unable to remove the white navbar.
Any help will be highly appriciated.

in my html css and javascript code the "fas fa-bars" don't open the menu when clicked

when clicking on the bars its meant to open a menu, i am following a youtube video and his works fine however mine isn't working.
hotel website tutorial
// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click',function (){
header.classList.toggle('menu-open');
});
/*Import the fonts used*/
#import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Custom properties*/
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html{
font-size: 10px;
}
body{
font-family: 'Open Sans', sans-serif;
font-size:1.6rem;
color: var(--dark-color);
}
a{
text-decoration: none;
color:inherit;
}
ul{
list-style: none;
}
section{
padding: 5rem 0;
}
/*reusable styles*/
.container{
width:100%;
max-width:120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*header styles*/
.header{
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left:0;
background-color: var(--purple-transparent);
z-index:999;
}
/*header styles - nav*/
.nav{
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img{
max-width: 80%;
}
.hamburger-menu{
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times{
display: none;
}
.menu-open .hamburger-menu .fa-times{
display: block;
}
.menu-open .hamburger-menu .fa-bars{
display: none;
}
.nav-list{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100vh;
background-color: var(--purple-solid);
display:flex;
flex-direction: column;
align-items:center;
z-index:1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
.menu-open .nav-list{
opacity: 1;
transform: scale(1);
}
.nav-item:not(:last-child){
margin-bottom: .5rem;
}
.nav-link{
display: block;
color: #fff;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Travelix</title>
<!--Font awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header"></header>
<div class="container"></div>
<nav class="nav">
<a href="index.html" class="logo">
<img src="./images/logo.png" alt="">
</a>
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
I believe the
.menu-open .nav-list{
opacity: 1;
transform: scale(1);
}
part is meant to be triggered when the javascript is run to make the menu visible

You did not move all your menu code inside header as you should.
your header is just opened then closed: <header class="header"></header>
<header class="header">
// move code here
</header>
It should go:
.menu-open .hamburger-menu .fa-bars {
display: none;
}
and you where putting menu-open outside so .menu-open .hamburger-menu .fa-bars never happen.
// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
console.log(true)
header.classList.toggle('menu-open');
})
/*Import the fonts used*/
#import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Custom properties*/
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html {
font-size: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
color: var(--dark-color);
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
section {
padding: 5rem 0;
}
/*reusable styles*/
.container {
width: 100%;
max-width: 120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*header styles*/
.header {
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
background-color: var(--purple-transparent);
z-index: 999;
}
/*header styles - nav*/
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
max-width: 80%;
}
.hamburger-menu {
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times {
display: none;
}
.menu-open .hamburger-menu .fa-times {
display: block;
}
.menu-open .hamburger-menu .fa-bars {
display: none;
}
.nav-list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--purple-solid);
display: flex;
flex-direction: column;
align-items: center;
z-index: 1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
.menu-open .nav-list {
opacity: 1;
transform: scale(1);
}
.nav-item:not(:last-child) {
margin-bottom: .5rem;
}
.nav-link {
display: block;
color: #fff;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem;
}
more writing because stuff this I swear this is an easy fix but I'm just dumb
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Travelix</title>
<!--Font awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div class="container"></div>
<nav class="nav">
<a href="index.html" class="logo">
<img src="./images/logo.png" alt="">
</a>
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
</header>
<script src="main.js"></script>
</body>
</html>
voted to close due to typo.

jquery toggleclass issues not collapsing [duplicate]

This question already has an answer here:
toggleClass not working in ajax
(1 answer)
Closed 3 years ago.
I'm having a problem with my jquery, I'm looking to collapse my sidebar on click on the hamburger, but toggleclass seeems to be not working.
Ive seen tutorials where toggleclass works just fine, is this a new issue?
Any help would be appreciated, thanks
* {
margin: 0;
list-style: none;
padding: 0;
text-decoration: none;
box-sizing: border-box;
font-family: default;
}
body {
background: white;
}
.wrapper {
margin: 10px;
}
.wrapper .top_navbar {
width: calc(100% - 20px);
height: 60px;
display: flex;
position: fixed;
top: 10px;
}
.wrapper .top_navbar .hamburger {
width: 70px;
height: 100%;
background: green;
padding: 15px 17px;
border-top-left-radius: 20px;
cursor: pointer;
}
.wrapper .top_navbar .hamburger div {
width: 35px;
height: 4px;
background: black;
margin: 5px 0;
border-radius: 5px;
}
.wrapper .top_navbar .top_menu {
width: calc(100% - 70px);
height: 100%;
background: red;
border-top-right-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wrapper .top_navbar .top_menu .logo {
color: black;
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.wrapper .top_navbar .top_menu ul {
display: flex;
}
.wrapper .top_navbar .top_menu ul li a {
display: block;
margin: 0 10px;
width: 35px;
height: 35px;
padding-top: 7px;
line-height: 35px;
border: 1px solid yellow;
text-align: center;
border-radius: 50%;
color: grey;
}
.wrapper .top_navbar .top_menu ul li a:hover {
background-color: blue;
color: white;
}
.wrapper .sidebar {
position: fixed;
top: 70px;
left: 10px;
background: green;
width: 200px;
height: calc(100% - 80px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
}
.wrapper .sidebar ul li a {
display: block;
padding: 20px;
position: relative;
margin-bottom: 1px;
color: white;
white-space: nowrap;
}
.wrapper .sidebar ul li a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: white;
}
.wrapper .sidebar ul li a span.icon {
margin-right: 10px;
display: inline-block;
}
.wrapper .sidebar ul li a span.title {
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active {
background: purple;
color: green;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before {
display: block;
}
.wrapper .main_container {
width: calc(100% - 200px);
margin-top: 70px;
margin-left: 200px;
padding: 15px;
transition: all 0.3s ease;
}
.wrapper .main_container .item {
background: #fff;
margin-bottom: 10px;
padding: 15px;
font-size: 14px;
line-height: 22px;
border: 0;
box-shadow: 0px 0px 5px 0px;
}
.wrapper.collapse .sidebar {
width: 70px;
}
.wrapper.collapse .sidebar ul li a {
text-align: center;
}
.wrapper.collapse .sidebar ul li a span.icon {
margin: 0;
}
.wrapper.collapse .sidebar ul li a span.title {
display: none;
}
.wrapper.collapse .main-container {
width: calc(100% - 70px);
margin-left: 70px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kit.fontawesome.com/5534ba8f0f.js"></script>
<script>
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass(".collapse");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="top_navbar">
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<div class="top_menu">
<div class="logo">Personal Dashboard</div>
<ul>
<li><i class="fas fa-search"></i></li>
<li><i class="fas fa-bell"></i></li>
<li><i class="fas fa-user"></i></li>
</ul>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">a</span>
</a></li>
<li><a href="#" class="active">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">b</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">c</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">d</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">e</span>
</a></li>
</ul>
</div>
<div class="main_container">
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
<div class="item">
jgjgjjskgjsg jskljgnrilgnslinglmsir.jmeljfkjskjfksjekfjskejksjfkesjfksefjskjfjeskfksjfkesjrjskejrkjesjktrskrjskejrrkjskrjekjrskjrekj
</div>
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
</div>
</div>
</body>
</html>

You do not need to define .collapse as a class because toggleClass expects a class.
Try
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});

Cant get form inputs side by side to each other

I tried a bunch of things like playing with padding and margin, I used tables and even displayed as an inline and inline-block but I have also tried to div different parts of the code hoping that separating the code I could manipulate it better but no results. I can't get my inputs to be side by side. Here is a link to the code on codepen.io. can someone please give me some help!
/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */
/* color:003027 dark green background */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
background-color: #fff;
}
body {
background: #ede6e6;
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a {
text-decoration: none;
color:#fff;
}
li {
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
background-position: center;
right:-20px;
left: -20px;
min-height: 100vh;
margin-bottom: 300px;
overflow-x: hidden;
background-attachment: fixed;
position: absolute;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn:link,
.search-btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
/* -------------------------------Section-Search------------------------------------ */
.section-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position:relative;
left:200px;
right:20px;
top: 500px;
height: 30vh;
width: 600px;
z-index: 99;
}
.main-Search{
padding:30px 10px;
display: inline;
}
.col1{
}
.col3{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li><i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-pinterest-square"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> Register</i></li>
<li><i class="fas fa-sign-in-alt">Login</i></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> Home</li>
<li> Featured List</li>
<li> About Us</li>
<li> Pages</li>
<li> Blog</li>
<li> contact</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
</div>
</div>
</section>
</header>
<section class ="section-Search">
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<div class="col1">
<input type="text" name="Search" placeholder="keyword,zipcode">
</div>
<!--- city-------->
<div class="col2">
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
</div>
<!--- state------->
<div class="col3">
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</div>
<!--- search button------->
<a class="search-btn" href="#">Search</a>
</select>
</form>
</section>
</body>
</html>

You have them in different div elements and div elements are block-level (appear on their own line). Just place them in the same div.
Also (FYI), you aren't using the label element correctly. The for attribute value in a label needs to match the id attribute value of the form element that the label is "for"`.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html{
background-color: #fff;
}
body{
background: #ede6e6;
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a{
text-decoration: none;
color:#fff;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
background-position: center;
right:-20px;
left: -20px;
min-height: 100vh;
margin-bottom: 300px;
overflow-x: hidden;
background-attachment: fixed;
position: absolute;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn:link,
.search-btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
/* -------------------------------Section-Search------------------------------------ */
.section-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position:relative;
left:200px;
right:20px;
top: 500px;
height: 30vh;
width: 600px;
z-index: 99;
}
.main-Search{
padding:30px 10px;
display: inline;
}
.col1{
}
.col3{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li> <i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-pinterest-square"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> Register</i></li>
<li> <i class="fas fa-sign-in-alt">Login</i></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> Home</li>
<li> Featured List</li>
<li> About Us</li>
<li> Pages</li>
<li> Blog</li>
<li> contact</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
</div>
</div>
</section>
</header>
<section class ="section-Search">
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<div class="col1">
<input type="text" name="Search" placeholder="keyword,zipcode">
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</div>
<!--- search button------->
<a class="search-btn" href="#">Search</a>
</select>
</form>
</section>
</body>
</html>

Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?

I'm Using jquery to show the submenu when menu(members)clicked. The toggle works when I click the Member menu and the problem is, when I click the submenu it will disappear, so I want it to stay when clicked. How to do that in javascript?...
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
$('.has-sub').click(function(){
$(this).toggleClass('tap')
});
});
</script>
</head>
<body>
<header>
<div class="logo">WORKOUT <span>FITNESS CENTER</span></div>
</header>
<div id="container">
<nav>
<ul>
<li>Walk-In</li>
<li class="has-sub">Members
<ul>
<li>Subscr</li>
<li>asdasd</li>
<li>asdasd</li>
</ul>
</li>
<li>Sales</li>
<li>Inventory</li>
<li>Suppliers</li>
<li>Reports</li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*{
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans';
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
}
.logo {
float: left;
margin-top: 9px;
margin-left: 15px;
}
.logo a{
font-size: 1.3em;
color: #070807;
}
.logo a span{
font-weight: 300;
color: #1AC93A;
}
nav{
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
}
#content {
width: :auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
}
nav li{
list-style: none;
}
nav li a{
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
nav li a:hover{
background-color: #030303;
color: #fff;
padding-left: 80px;
}
nav ul li ul {
display: none;
}
/*nav ul li:hover > ul{
display: block;
}*/
nav ul li.tap > ul{
display: block;
}

This is because the events on child bubble up to the parent when clicked, to stop this add a click event to the child element and call e.stopPropagation() to prevent bubbling up to the parent being .has-sub:
$(".has-sub ul").click(function(e){
e.stopPropagation();
});
Fiddle Example

Add a sub class to the ul from the li
Try:
<div id="container">
<nav>
<ul>
<li>Walk-In
</li>
<li class="has-sub">Members
<ul class="sub">
<li>Subscr
</li>
<li>asdasd
</li>
<li>asdasd
</li>
</ul>
</li>
<li>Sales
</li>
<li>Inventory
</li>
<li>Suppliers
</li>
<li>Reports
</li>
</ul>
</nav>
<div id="content">SOME CONTENT YAY</div>
</div>
$('.has-sub').click(function(e){
if ($(e.target).parents('.sub').length == 0 ){
$(this).toggleClass('tap');
}
});
jsfiddle: https://jsfiddle.net/v9ynq7og/

Try this. i have added id into main menu and while click check for target id and base on this you can perform appropriate action
$(document).ready(function(e) {
$('.has-sub').click(function(e) {
if (e.target.id)
$(this).toggleClass('tap')
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans';
}
a {
text-decoration: none;
}
header {
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
}
.logo {
float: left;
margin-top: 9px;
margin-left: 15px;
}
.logo a {
font-size: 1.3em;
color: #070807;
}
.logo a span {
font-weight: 300;
color: #1AC93A;
}
nav {
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
}
#content {
width: : auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
}
nav li {
list-style: none;
}
nav li a {
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
nav li a:hover {
background-color: #030303;
color: #fff;
padding-left: 80px;
}
nav ul li ul {
display: none;
}
/*nav ul li:hover > ul{
display: block;
}*/
nav ul li.tap > ul {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Dashboard</title>
<body>
<header>
<div class="logo">WORKOUT <span>FITNESS CENTER</span>
</div>
</header>
<div id="container">
<nav>
<ul>
<li>Walk-In
</li>
<li class="has-sub">
<a href="#" id='id1'>Members</a>
<ul>
<li>Subscr
</li>
<li>asdasd
</li>
<li>asdasd
</li>
</ul>
</li>
<li>Sales
</li>
<li>Inventory
</li>
<li>Suppliers
</li>
<li>Reports
</li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>

I think you are looking for this...
$(document).ready(function(e)
{
$('.test').click(function(e){
if($(this).hasClass("test1"))
{
e.stopPropagation();
}else
{
$(this).toggleClass('tap');
}
});
});
**CSS**
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*{
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans';
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
}
.logo {
float: left;
margin-top: 9px;
margin-left: 15px;
}
.logo a{
font-size: 1.3em;
color: #070807;
}
.logo a span{
font-weight: 300;
color: #1AC93A;
}
nav{
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
}
#content {
width: :auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
}
nav li{
list-style: none;
}
nav li a{
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
nav li a:hover{
background-color: #030303;
color: #fff;
padding-left: 80px;
}
nav ul li ul {
display: none;
}
/*nav ul li:hover > ul{
display: block;
}*/
nav ul li.tap > ul{
display: block;
}
<html>
<head>
<title>Dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="logo">WORKOUT <span>FITNESS CENTER</span></div>
</header>
<div id="container">
<nav>
<ul>
<li>Walk-In</li>
<li class="has-sub test">Members
<ul>
<li><a href="#" class='test test1'>Subscr</a></li>
<li><a href="#" class='test test1'>asdasd</a></li>
<li><a href="#" class='test test1'>asdasd</a></li>
</ul>
</li>
<li>Sales</li>
<li>Inventory</li>
<li>Suppliers</li>
<li>Reports</li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>

Need to add a jquery function.
$('.has-sub ul').click(function(){
return false
});
Here is the jsFiddle for your requirement

Develop Reference

JavaScript is the programming language of the Web.

SideBar navigation collapse shows blank screen when bootstrap 4 css loaded - javascript

Related

Responsive collapsible sidebar using bootstrap

in my html css and javascript code the "fas fa-bars" don't open the menu when clicked

jquery toggleclass issues not collapsing [duplicate]

Cant get form inputs side by side to each other

Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?

Categories

Resources