We Keep Coding

Submenu not opening on clicking arrow button , instead opens on clicking on the li tag i.e services

On clicking the arrow button it shows no action, however on clicking services it opens up. Well, what I want is to open on clicking the arrow button as well as service i.e. li tag. And also on clicking the arrow button, when the show class is active the caret or angle down button should horizontally rotate 180 deg. These are the two things I want in my work, let me clarify again.
On clicking the arrow button submenu should appear.
Rotation of arrow button 180deg when the submenu is open.
Link to my work is: https://codepen.io/TA0011/pen/yLjWwGQ
//for sidebar
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
//for sidebar
//for sidebar submenu
const caretButton = document.querySelectorAll(".caret");
caretButton.forEach((el) =>
el.addEventListener("click", (event) => {
const subMenu = event.target.parentElement.querySelector(".sub-menu");
subMenu.classList.toggle("show");
})
);
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
}
header {
height: 50px;
width: 100%;
background: coral;
position: fixed;
}
header img {
height: 40px;
width: 40px;
margin: 5px;
}
#sidebar-toggle {
display: inline-block;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
padding: 5px 10px;
height: 40px;
width: 40px;
margin-top: 5px;
float: right;
}
#sidebar-toggle div {
width: 20px;
height: 2px;
background-color: #fff;
margin: 6px 0;
transition: all 0.3s ease 0s;
cursor: grab;
}
#sidebar-toggle.open .bar4 {
transform: translate(0, 8px) rotate(-45deg);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
transform: translate(0px, -8px) rotate(45deg);
}
#mySidebar {
transition: all 0.2s linear;
transform: translateX(-250px);
display: flex;
flex-direction: column;
height: calc(100vh - 50px);
box-sizing: border-box;
top: 50px;
}
/* then a few properties removed and box-sizing added */
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
z-index: 0;
transition: all 0.5s ease;
}
.open.sidebar {
display: flex;
}
.sidebar-nav {
flex: 1;
overflow: auto;
}
#mySidebar.open {
transform: translateX(0);
}
.sidebar-header {
padding: 0px;
width: 100%;
background: rgba(0, 136, 169, 1);
height: 3rem;
}
.sidebar-header .profile {
display: flex;
color: #fff;
}
.profile .profile-image img {
flex-wrap: wrap;
pointer-events: none;
border-radius: 50%;
width: 40px;
float: none;
display: block;
object-fit: fill;
height: 40px;
margin-left: 20px;
}
.profile .profile-name {
display: inline-flex;
display: flex;
align-items: center;
justify-content: center;
margin: 0 2px 0 5px;
font-size: 14px;
font-weight: 600 !important;
}
.profile .profile-name i {
margin: -2px 5px 0 2px;
font-size: 16px;
}
.profile-stats {
margin: 10px 0;
color: #fff;
font-size: 12px;
display: flex;
flex-direction: row;
gap: 0.25rem;
align-items: center;
cursor: pointer;
}
.profile-stats .stats {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
#followerCount,
#mediaCount,
#followingCount {
font-size: 10px;
}
.sidebar-nav {
margin: 0;
overflow: auto;
}
.sidebar-nav ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
list-style: none;
padding: 0 15px;
line-height: 30px;
box-sizing: border-box;
}
.sidebar-nav ul li {
width: 100%;
box-sizing: border-box;
color: #007bff;
padding: 5px 10px;
margin: 1px 0;
}
.sidebar-nav ul li a {
text-decoration: none;
}
.sidebar-nav ul .active,
.sidebar-nav ul .active a .icon {
background: #007bff;
color: #ffffff;
border-radius: 10px;
}
.sidebar-nav ul li:hover,
.sidebar-nav ul li:hover a .icon,
.sidebar-nav ul li:hover a {
background: #007bff;
color: #ffffff;
border-radius: 10px;
}
.sidebar-nav ul li a .icon {
color: #007bff;
width: 30px;
display: inline-block;
}
.sidebar-nav ul li a .caret {
left: 90px;
position: relative;
}
.sidebar-nav .sidebar-nav-header {
text-transform: uppercase;
font-size: 11px;
margin: -0.75rem 1.5rem;
color: #0c7db1;
}
.sidebar-footer {
background: #FF7F50;
text-align: center;
}
.sidebar-footer span a {
display: block;
padding: .5em 0;
color: #fff;
background: #FF7F50;
font-weight: 600 !important;
text-decoration: none;
}
.sidebar-footer span i {
width: 30px;
font-size: 16px;
}
.sidebar-nav ul .sub-menu {
display: none;
}
.sidebar-nav ul .sub-menu.show {
display: flex;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
<header>
<img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg" class="logo" alt="Logo">
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</header>
<div class="sidebar" id="mySidebar">
<div class="sidebar-header">
<div class="profile">
<div class="profile-image">
<img src="https://media-exp1.licdn.com/dms/image/C560BAQHMnA03XDdf3w/company-logo_200_200/0/1519855918965?e=2147483647&v=beta&t=J3kUMZwIphc90TFKH5oOO9Sa9K59fimgJf-s_okU3zs">
</div>
<div class="profile-name">
<i class="fas fa-chess-pawn"></i><span>Umann Goswami</span>
</div>
</div>
</div>
<!--sidebar-header-->
<div class="sidebar-nav">
<ul>
<li class="active"><span class="icon"><i class="fas fa-home"></i></span>Home</li>
<li class="caret"><a><span class="icon"><i class="fas fa-chart-bar"></i></span>Services<span class="caret fas fa-angle-down"</a>
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li><span class="icon"><i class="fas fa-pen-nib"></i></span>Home
</li>
<li><span class="icon"><i class="fas fa-file-alt"></i></span>Home</li>
<li><span class="icon"><i class="far fa-comments"></i></span>home</li>
<li><span class="icon"><i class="fas fa-cog"></i></span>home</li>
</ul>
<div class="sidebar-nav-header">
Admin
</div>
<ul>
<li><span class="icon"><i class="fas fa-users"></i></span>home</li>
</ul>
<div class="sidebar-nav-header">
Profile
</div>
<ul>
<li><a href=""><span class="icon"><i class="fas
fa-user"></i></span>home</a></li>
<li><span class="icon"><i class="fas fa-user-edit"></i></span>Home</li>
</ul>
<div class="sidebar-nav-header">
Analysis
</div>
<ul>
<li><span class="icon"><i class="fas fa-user"></i></span>Home</li>
<li><span class="icon"><i class="fas fa-user-edit"></i></span>Home</li>
</ul>
</div>
<!--sidebar-nav-->
<div class="sidebar-footer">
<span><i class="fas fa-power-off"></i>Logout</span>
</div>
</div>
<!--sidebar-->

can make some changes:
const caretButton = document.querySelectorAll(".list-item");
caretButton.forEach((el) =>
el.addEventListener("click", (event) => {
if (el.tagName === "LI") {
el.querySelector(".sub-menu").classList.toggle("show")
el.querySelector(".caret").classList.toggle("rotated")
}
})
);
.rotated {
transform: rotate(180deg)
}
<li class="list-item">
<span class="icon">
<i class="fas fa-chart-bar"></i>
</span>Services
<span class="caret fas fa-angle-down" />
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
Your HTML was with little mistakes and added one class 'rotated' and modified JS because there was a mistake when submenu was undefined because of parentElement attribute

Spacing problem between Header and Sidebar

I'm programming a page and I have a Header and a Sidebar but I'm in trouble with the top property overlapping my header, the sidebar would have to have the top value zeroed but in this scenario it overlaps my header by changing the value to 10 for example I solve this problem of overlapping but create an unwanted spacing when Scrolling. I am new to the world of web design but I have tried several solutions for such an event but none solves such a occurred.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Header */
header .navbar {
font-size: 15px;
background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
}
header #navbarNavAltMarkup {
justify-content: flex-end;
}
header #navbarNavAltMarkup .nav-link {
color: #fff;
transition: all ease 0.2s;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .nav-link:hover {
color: #081145;
transition: all ease 0.2s;
}
header #navbarNavAltMarkup .active {
color: #081145;
font-weight: 400;
}
header #navbarNavAltMarkup .dropbtn {
background-color: transparent;
color: white;
padding: 16px;
border: none;
cursor: pointer;
font-size: 15px;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
background-color: transparent;
}
header #navbarNavAltMarkup .dropdown {
position: relative;
display: inline-block;
}
header #navbarNavAltMarkup .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 100px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
header #navbarNavAltMarkup .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
header #navbarNavAltMarkup .dropdown a:hover {
background-color: #ddd;
}
header #navbarNavAltMarkup .show {
display: block;
}
/* Test */
/* Mobile */
header .navbar-nav {
align-items: center;
}
/* End Header */
/* Aside */
.sidebar {
position: fixed;
left: 0;
top: 10;
height: 100%;
width: 78px;
/* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
background: #11101D;
padding: 2px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open {
width: 250px;
}
.sidebar .logo-details {
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon {
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name {
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name {
opacity: 1;
}
.sidebar .logo-details #btn {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn {
text-align: right;
}
.sidebar i {
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list {
margin-top: 20px;
height: 100%;
}
.sidebar li {
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip {
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar ol,
ul {
padding-left: 0px;
}
.sidebar li:hover .tooltip {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip {
display: none;
}
.sidebar input {
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #1d1b31;
}
.sidebar.open input {
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #1d1b31;
color: #FFF;
}
.sidebar.open .bx-search:hover {
background: #1d1b31;
color: #FFF;
}
.sidebar .bx-search:hover {
background: #FFF;
color: #11101d;
}
.sidebar li a {
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #11101D;
}
.sidebar li a:hover {
background: #FFF;
}
.sidebar li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i {
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i {
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile {
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #1d1b31;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile {
width: 250px;
}
.sidebar li .profile-details {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img {
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job {
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job {
font-size: 12px;
}
.sidebar .profile #log_out {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out {
width: 50px;
background: none;
}
body {
background: #E4E9F7;
}
.home-section {
position: relative;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open~.home-section {
left: 250px;
width: calc(100% - 250px);
}
.home-section .text {
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip {
display: none;
}
}
/* End Aside */
<header>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon p-0 m-0">
<img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
</span>
</button>
<div class="collapse navbar-collapse " id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">PAINEL</a>
<a class="nav-link" href="#">CNGR</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
<a class="nav-link" href="#">VOIP</a>
<div class="dropdown ">
<button onclick="myFunction()" class="dropbtn">
PROFILE
</button>
<div id="myDropdown" class="dropdown-content">
Perfil
Logout
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<sidebar class="sidebar">
<div class="logo-details">
<i class='bx bx-phone icon'></i>
<div class="logo_name">VOIP</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-data'></i>
<span class="links_name">Database</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat'></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder'></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt'></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="profile.jpg" alt="profileImg">
<div class="name_job">
<div class="name">Prem Shahi</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out"></i>
</li>
</ul>
</sidebar>
<section class="home-section">
<div class="text">Dashboard</div>
</section>
</main>

As told there can be 2 solutions to your problem :
You can use z-index on header and put it above sidebar
For that have use z-index value of sidebar to be -1 . As using this you must be careful as some content may overlap(overlay) your sidebar so it is better to leave a margin on the left
Use sticky property to have it stick to top when scrolling
You have to make a lot of changes in your CSS to make a look right now , but for a start you can use display: block along position: sticky to have a start and improve on the go
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Header */
header .navbar {
font-size: 15px;
background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
}
header #navbarNavAltMarkup {
justify-content: flex-end;
}
header #navbarNavAltMarkup .nav-link {
color: #fff;
transition: all ease 0.2s;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .nav-link:hover {
color: #081145;
transition: all ease 0.2s;
}
header #navbarNavAltMarkup .active {
color: #081145;
font-weight: 400;
}
header #navbarNavAltMarkup .dropbtn {
background-color: transparent;
color: white;
padding: 16px;
border: none;
cursor: pointer;
font-size: 15px;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
background-color: transparent;
}
header #navbarNavAltMarkup .dropdown {
position: relative;
display: inline-block;
}
header #navbarNavAltMarkup .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 100px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
header #navbarNavAltMarkup .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
header #navbarNavAltMarkup .dropdown a:hover {
background-color: #ddd;
}
header #navbarNavAltMarkup .show {
display: block;
}
/* Test */
/* Mobile */
header .navbar-nav {
align-items: center;
}
/* End Header */
/* Aside */
.sidebar {
position: fixed;
left: 0;
top: 10;
height: 100%;
width: 78px;
/* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
background: #11101D;
padding: 2px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open {
width: 250px;
}
.sidebar .logo-details {
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon {
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name {
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name {
opacity: 1;
}
.sidebar .logo-details #btn {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn {
text-align: right;
}
.sidebar i {
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list {
margin-top: 20px;
height: 100%;
}
.sidebar li {
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip {
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar ol,
ul {
padding-left: 0px;
}
.sidebar li:hover .tooltip {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip {
display: none;
}
.sidebar input {
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #1d1b31;
}
.sidebar.open input {
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #1d1b31;
color: #FFF;
}
.sidebar.open .bx-search:hover {
background: #1d1b31;
color: #FFF;
}
.sidebar .bx-search:hover {
background: #FFF;
color: #11101d;
}
.sidebar li a {
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #11101D;
}
.sidebar li a:hover {
background: #FFF;
}
.sidebar li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i {
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i {
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile {
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #1d1b31;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile {
width: 250px;
}
.sidebar li .profile-details {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img {
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job {
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job {
font-size: 12px;
}
.sidebar .profile #log_out {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out {
width: 50px;
background: none;
}
body {
background: #E4E9F7;
}
.home-section {
position: relative;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open~.home-section {
left: 250px;
width: calc(100% - 250px);
}
.home-section .text {
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip {
display: none;
}
}
/* End Aside */
<header>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon p-0 m-0">
<img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
</span>
</button>
<div class="collapse navbar-collapse " id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">PAINEL</a>
<a class="nav-link" href="#">CNGR</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
<a class="nav-link" href="#">VOIP</a>
<div class="dropdown ">
<button onclick="myFunction()" class="dropbtn">
PROFILE
</button>
<div id="myDropdown" class="dropdown-content">
Perfil
Logout
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<sidebar class="sidebar">
<div class="logo-details">
<i class='bx bx-phone icon'></i>
<div class="logo_name">VOIP</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-data'></i>
<span class="links_name">Database</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat'></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder'></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt'></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="profile.jpg" alt="profileImg">
<div class="name_job">
<div class="name">Prem Shahi</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out"></i>
</li>
</ul>
</sidebar>
<section class="home-section">
<div class="text">Dashboard</div>
</section>
</main>
With 1st solution there also comes some problem like your content will be hidden under header until you scroll . Here you can use margin and sticky for inside content of sidebar or it is better to improve CSS and go 2nd option

You can give dashboard overflow-Y: scroll and reduce its width to 100%-open sidebar width(flexbox will adjust dashboard´s width automatically if you give sidebar element min-width: max-content;). This is how you stick your sidebar in place without using position or z-index. I will give you a little example
const button = document.querySelector('button');
const sidebar = document.querySelector(".sidebar");
button.onclick = () => {
sidebar.classList.toggle('active');
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.header {
height: 10vh;
background: red;
}
.content {
display: flex;
flex-flow: row nowrap;
}
.content .sidebar {
width: 5%;
background: black;
height: 90vh;
}
.content .sidebar.active {
width: 20%;
}
.content .dashboard {
height: 90vh;
width: 100%;
background: green;
overflow-y: scroll;
scroll-behavior: smooth;
}
.content .dashboard .hard-coded-overflow {
height: 1000px;
}
<body>
<div class="header"></div>
<div class="content">
<div class="sidebar active">
<button class="close">close</button>
</div>
<div class="dashboard">
<div class="hard-coded-overflow">
</div>
</div>
</div>
</body>
You can add transition to make it seem like a proper animation and it is way better user experience than overlaping sidebar on top of main content( that should happen when media width is adequate for mobile devices).

Responsive header not opening or closing header

I'm creating a responsive header for a website I'm creating and I'm not getting this output where when my browser gets small enough the bars icon comes up to press. But for some reason when I try to open up the menu it does not work. I'm looking for some help on this I can't seem to figure it out as I'm not very knowledgeable in JavaScript, CSS, HTML.
HTML
<!DOCTYPE html>
<html>
<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">
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="css1/headercss2.css">
<script src="javascript/script.js" defer></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav>
<div class="menu-icons">
<i class="fas fa-bars"></i>
</div>
<a href="#" class="logo">
<img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
</a>
<ul class="nav-list">
<li>
Home
</li>
<li>
<a href="#">Services
<i class="fas fa-sort-down"></i>
</a>
<ul class="sub-menu">
<li>
Business Printing
</li>
<li>
Canvas Printing
</li>
<li>
Embroidery
</li>
<li>
Signs
</li>
</ul>
</li>
<li>
Partners
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="move-right btn">
Cart
</li>
</ul>
</nav>
</div>
</header>
<script src="javascript/script.js"></script>
</body>
</html>
CSS
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.containter {
width: 100%;
max-width: 117rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.menu-icons{
color: #eee;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
display: none;
}
nav {
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border-bottom: 1px solid rgba(225,225,225, 0.1);
}
.logo {
display: flex;
margin-right: 5rem;
}
.nav-list {
display: flex;
width: 100%;
align-items: center;
}
.nav-list li {
line-height: 8rem;
position: relative;
}
.sub-menu li {
line-height: 4rem;
}
.nav-list a {
display: block;
color: white;
background-color: #1E90FF;
padding: 0 1.5rem;
font-size: 1.4rem;
text-transform: uppercase;
transition: color 650ms;
}
.nav-list a:hover {
color: black;
background-color: yellow;
}
.btn {
padding: 1.3rem;
display: inline-block;
background-color: #1E90FF;
border: 2px solid #1E90FF;
border-radius: 5rem;
}
.btn:hover {
color: black;
background-color: yellow;
}
.sub-menu {
width: 20rem;
display: block;
position: absolute;
border-top: 3px solid #00BFFF;
z-index: 100;
top: 16rem;
transition: all 650ms ease;
opacity: 0;
visibility: hidden;
}
.sub-menu::before {
content: '';
position: absolute;
top: -2.5rem;
left: 3rem;
border: 1.2rem solid transparent;
border-bottom-color: #00BFFF;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -2.5rem;
border: 1.2rem solid transparent;
border-right-color: #00BFFF;
}
.sub-menu .sub-menu{
border-top: none;
border-left: 3px solid #00BFFF;
top: 0;
left: 160%;
}
.nav-list li:hover > .sub-menu {
top: 8rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover > .sub-menu {
top: 0;
left: 100%;
}
li.move-right {
margin: auto 0 auto auto;
line-height: initial;
}
#media screen and (max-width: 850px) {
.nav-list {
position: fixed;
top: 0;
left: 0;
height: 100vh;
display:none;
align-items: initial;
flex-direction: column;
background-color: #1E90FF;
z-index: 1000;
}
.nav-list li {
line-height: 6rem;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: #00BFFF;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-list li:hover > .sub-menu{
opacity: 1;
visibility: visible;
max-height: initial;
}
li.move-right {
margin: 0 auto 0 0;
line-height: initial;
}
.menu-icons {
display: block;
}
.fas fa-times {
display: none;
}
nav.active .fas fa-times{
display: block;
}
nav.active .fas fa-bars{
display: none;
}
nav.active .nav-list {
display:flex;
}
}
JavaScript
const selectElement = (element) => document.querySelector(element);
selectElement('.menu-icons').addEventListener('click', () => {
selectElement{'nav').classList.toggle('active');
);

You have an extra { where you should have a (:
document.querySelector('.menu-icons').addEventListener('click', () => {
document.querySelector('nav').classList.toggle('active');
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.containter {
width: 100%;
max-width: 117rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.menu-icons {
color: #eee;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
}
nav {
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border-bottom: 1px solid rgba(225, 225, 225, 0.1);
}
.logo {
display: flex;
margin-right: 5rem;
}
.nav-list {
display: flex;
width: 100%;
align-items: center;
}
.nav-list li {
line-height: 8rem;
position: relative;
}
.sub-menu li {
line-height: 4rem;
}
.nav-list a {
display: block;
color: white;
background-color: #1E90FF;
padding: 0 1.5rem;
font-size: 1.4rem;
text-transform: uppercase;
transition: color 650ms;
}
.nav-list a:hover {
color: black;
background-color: yellow;
}
.btn {
padding: 1.3rem;
display: inline-block;
background-color: #1E90FF;
border: 2px solid #1E90FF;
border-radius: 5rem;
}
.btn:hover {
color: black;
background-color: yellow;
}
.sub-menu {
width: 20rem;
display: block;
position: absolute;
border-top: 3px solid #00BFFF;
z-index: 100;
top: 16rem;
transition: all 650ms ease;
opacity: 0;
visibility: hidden;
}
.sub-menu::before {
content: '';
position: absolute;
top: -2.5rem;
left: 3rem;
border: 1.2rem solid transparent;
border-bottom-color: #00BFFF;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -2.5rem;
border: 1.2rem solid transparent;
border-right-color: #00BFFF;
}
.sub-menu .sub-menu {
border-top: none;
border-left: 3px solid #00BFFF;
top: 0;
left: 160%;
}
.nav-list li:hover>.sub-menu {
top: 8rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover>.sub-menu {
top: 0;
left: 100%;
}
li.move-right {
margin: auto 0 auto auto;
line-height: initial;
}
#media screen and (max-width: 850px) {
.nav-list {
position: fixed;
top: 0;
left: 0;
height: 100vh;
display: none;
align-items: initial;
flex-direction: column;
background-color: #1E90FF;
z-index: 1000;
}
.nav-list li {
line-height: 6rem;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: #00BFFF;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-list li:hover>.sub-menu {
opacity: 1;
visibility: visible;
max-height: initial;
}
li.move-right {
margin: 0 auto 0 0;
line-height: initial;
}
.menu-icons {
display: block;
}
.fas fa-times {
display: none;
}
nav.active .fas fa-times {
display: block;
}
nav.active .fas fa-bars {
display: none;
}
nav.active .nav-list {
display: flex;
}
}
<header>
<div class="container">
<nav>
<div class="menu-icons">
<i class="fas fa-bars"></i> text
</div>
<a href="#" class="logo">
<img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
</a>
<ul class="nav-list">
<li>
Home
</li>
<li>
<a href="#">Services
<i class="fas fa-sort-down"></i>
</a>
<ul class="sub-menu">
<li>
Business Printing
</li>
<li>
Canvas Printing
</li>
<li>
Embroidery
</li>
<li>
Signs
</li>
</ul>
</li>
<li>
Partners
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="move-right btn">
Cart
</li>
</ul>
</nav>
</div>
</header>

Make dropdown menu in css like in the picture

I have questions about how to reproduce the following:
I have the menu like this:
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover:after {
display: block;
}
<nav>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</nav>
But, I don't know how to make the drop-down list like the picture shown above.
I hope someone can help me. Thank you in advance!

Hey This is what You want :) I hope
body {
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.nav__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
.nav__li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
.nav__li:last-child a:before {
display: none;
}
.nav__li:hover > a {
background: red;
}
.nav__li:hover > a:after {
display: block;
}
.nav__li:hover .sub__category {
visibility: visible;
opacity: 1;
}
.nav__li > a {
display: inline-block;
padding: 25.6px 0.6em 0.7em 0.6em;
position: relative;
font-size: 18px;
line-height: 1;
}
.nav__li > a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 25.6px;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
}
.nav__li > a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #ffaf1a;
z-index: 2;
}
.sub__category {
visibility: hidden;
opacity: 0;
}
.sub__category {
position: absolute;
top: 100%;
left: 0px;
min-width: 160px;
width: 100%;
z-index: 3;
margin: 0 .5em;
padding-top: 25.6px;
-webkit-transition: all .12s linear;
transition: all .12s linear;
}
.sub__li {
text-align: center;
border-bottom: 2px #000 solid;
background: red;
}
.sub__link {
padding: .7em 1em;
display: block;
font-size: 14px;
}
.sub__link:hover {
background: #fff;
color: #000;
}
<nav>
<ul class="nav__cat">
<li class="nav__li">Menu 1</li>
<li class="nav__li">Menu 23
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 345
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 4567</li>
<li class="nav__li">Menu 56789</li>
</ul>
</nav>

For starters, you obviously will need some content in each of the menus!
Make sure to open this in the full page.
There is still a lot more styling work that needs to be done to achieve the result you want, but hopefully this helps you get moving in the right direction.
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>

Here a fiddle of improved #Our_Benfactors answer
fiddle
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.active .submenu_group a:after {
background: transparent;
}
.active .submenu_group a {
background:#b42024;
}
.active .submenu_group a:hover {
background: #fff;
color:#000;
border-top: 2px inset #000;
border-bottom: 2px inset #000;
}
.active .submenu_group li:first-child a:hover {
border-top: 0;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
.active .submenu_group li:first-child a {
margin-top: 28px;
}
.active .submenu_group a {
padding: 10px;
}
.active:hover .submenu_group {
display: block;
position: absolute;
background: #000;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>

How to make a responsive dropdown menu like the one on http://www.brotherbots.com/

I was wondering how I can make a dropdown look like the one on http://www.brotherbots.com/ in mobile and desktop view. I combined some examples from w3schools. It works in desktop view but not in mobile. I don't particulary like the styling but I think I can fix it myself. Also is this the best way to do it?
I have a jsfiddle here.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
ul.topnav li a:hover {
background-color: #555;
}
ul.topnav li.icon {
display: none;
}
#media screen and (max-width: 460px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width: 460px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="icon">
☰
</li>
</ul>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>

you can use meterialised drop down....
for eg
css
$grey: #9e9e9e;
$plum: #8e44ad;
$shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
h1, a, li {
font-family: Roboto, sans-serif;
}
h1 {
font-size: 26px;
background: lighten($plum, 5%);
color: white;
padding: 40px 0 40px 20%;
margin-bottom: 50px;
}
a, li {
color: darken($grey, 20%);
text-decoration: none;
}
.nav {
margin-left: 20%;
> li {
display: inline-block;
padding: 1em 18px;
cursor: pointer;
&:hover {
background: lighten($grey, 30%);
}
}
}
.drop {
position: relative;
ul {
position: absolute;
left: 0;
top: 3em;
transition: all 0.3s ease;
transform: scale(0);
transform-origin: 0 0;
box-shadow: $shadow;
li {
display: block;
width: 100%;
a {
width: 100%;
padding: 1em 18px;
display: inline-block;
white-space: pre;
box-sizing: border-box;
&:hover {
background: lighten($grey, 30%);
}
}
}
}
&:hover {
ul {
transform: scale(1);
}
}
}
//---------------------------------------------
.follow {
width: 42px;
height: 42px;
border-radius: 50px;
background: #03A9F4;
display: block;
margin: 300px auto 0;
white-space: nowrap;
padding: 13px;
box-sizing: border-box;
color: white;
transition: all 0.2s ease;
font-family: Roboto, sans-serif;
text-decoration: none;
box-shadow: 0 5px 6px 0 rgba(0,0,0,0.2);
i {
margin-right: 20px;
transition: margin-right 0.2s ease;
}
&:hover {
width: 134px;
i {
margin-right: 10px;
}
}
}
#media screen and (max-width: 800px) {
.follow {
margin: 400px auto 0;
}
}
html
<h1>Material Design CSS Only Dropdown Menu</h1>
<ul class="nav">
<li>Home</li>
<li>Portfolio</li>
<li class="drop">Drop
<ul>
<li>Art</li>
<li>Coding</li>
<li>Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Contact</li>
</ul>
<a class="follow" href="https://twitter.com/mildrenben" target="_blank"><i class="fa fa-twitter"></i>Follow Me</a>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700' rel='stylesheet' type='text/css'>

I would recommend checking out Bootstrap. It will help if you're not a fan of styling and they have good documentation on their website for the navbar section. Unfortunately they do not have the 'responsiveness' your looking for but I found a JSFiddle where someone adds CSS for this reason.
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<ul class="nav nav-pills">
<li class="active">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
Hope this helps.