How to make my navigation bar, have a slide animation when my div button is pressed.
I have created the java script function for it showing up in general, but having it popping up from nowhere is kind of annoying.I want it to show and slide slowly from the top for 2-3 seconds.
I tried using the following code on the class that wraps up all (nav-list) but it didn't work out:
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
padding: 30px 10px;
font-size: 17px;
text-align: center;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
display: block;
}
.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav-list {
display: none;
transform: translateX(100%);
transition: transform 1s ease-in;
}
.nav-list.active {
display: block;
margin: 0;
padding: 0;
transform: translateX(0%);
}
}
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<center>
<nav class="nav">
<div class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</div>
<span class="nav-list">
<a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a>
<a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a>
<a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a>
<a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a>
<a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a>
</span>
</nav>
</center>
.nav-list{
display: block;
transform: translateX(100%);
transition: transform 1s ease-in;
opacity: 0;
visibility: hidden;
}
.nav-list.active {
margin: 0;
padding: 0;
transform: translateX(0%);
opacity: 1;
visibility: visible;
}
You have to replace this css and check.
Related
I have the idea of having the anchor tags show up when they're set to active and I have tried using JavaScript to access them and make them active when clicking on a div/button (I tried with button but it didn't work out.).
The problem is that nothing happens. I ran through my code and didn't find where I can be wrong.
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js" ></script>
</head>
<body>
<nav class="nav">
<button class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</button>
<ul class="nav-list">
<li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a></li>
<li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a></li>
<li><a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a></li>
<li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a></li>
<li><a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a> </li>
</ul>
</nav>
</body>
</html>
IndexStyle.css:
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav-list {
display:none;
}
.nav-list.active {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
ResponsiveMenu.js:
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
Lets take this one step at a time, first lets look at the HTML. The center tag is no longer supported in HTML5 so I removed it. Second you had an extra quotation mark in your last anchor which I removed. In order to get all the links to show at once you should wrap them in a container. In this case a list makes the most sense. I have created a nav-list for you and wrapped all your anchor tags in an li tag.
As far as your CSS I noticed you were using .anchor:active which is a Pseudo class. This is not the same as having a class of anchor AND a class of active. If you want to select a class of anchor that also has a class of active you would use .anchor.active. In this case the active class is going on the nav-list so I style it using .nav-list.active
Now for the Javascript. Instead of using it to loop over all the anchor tags and setting them to active individually you can now just toggle the active class on your nav-list. This will make all the links appear at the same time.
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav-list {
display:none;
}
.nav-list.active {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
<nav class="nav">
<button class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</button>
<ul class="nav-list">
<li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a></li>
<li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a></li>
<li><a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a></li>
<li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a></li>
<li><a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a> </li>
</ul>
</nav>
As I understood you want to make the nav items active on click here's some issues to fix
1- querySelector returns only the first element in the list, so here you have 5 elements with class of anchors so it'll return the first anchor tag with class of .anchors and therefore you need querySelectorAll
Read more about querySelector here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
And querySelectorAll in here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Briefly querySelectorAll returns a nodeList that you can treat as an array so you need to loop over this array and set the onclick event on each element like so
const navbarLinks = document.querySelectorAll(".anchors");
navbarLinks.forEach((link) =>
link.addEventListener("click", (e) => {
e.target.classList.toggle("active");
})
);
2- you don't appear to have a class called active so classList.toggle would not work add this to your css
.active {
background-color: #ddd !important;
color: black;
}
3- you have a small bug in your html, the last anchor tag (a href="#"") notice that it has 2 double quotes for closing
4- with the previous code in (2) you'll notice being able to select multiple values which is not what we want therefore you should remove active class from all other anchor tags when 1 is active and you can achieve this with the following code
link.addEventListener("blur", (e) => {
link.classList.remove("active");
});
blur works when you're not focusing on the element anymore
check MDN here for more info https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
here's a working example
const toggleButton = document.querySelector(".dot_a");
const navbarLinks = document.querySelectorAll(".anchors");
navbarLinks.forEach((link) => {
link.addEventListener("click", (e) => {
e.target.classList.add("active");
});
link.addEventListener("blur", (e) => {
link.classList.remove("active");
});
});
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
.anchors {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.active {
background-color: #ddd !important;
color: black !important;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
display: none;
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="ResponsiveMenu.js" defer></script>
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js"></script>
</head>
<body>
<center>
<nav class="nav">
<div class="dot_a" style="pointer-events: none;">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</div>
<a class="anchors" href="#"><i class="fas fa-house-damage"></i> НАЧАЛО</a>
<a class="anchors" href="#"><i class="fas fa-code"></i> HTML&CSS</a>
<a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a>
<a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a>
<a class="anchors" href="#"><i class="far fa-address-card"></i> ЗА НАС</a>
</nav>
</center>
</body>
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).
I have built a modal and inserted it into my code, however whenever I press the button that is supposed to open it up it goes to the bottom of the page. It is supposed to be on top of the rest of the page with a blurry bg, per say, but it just goes to the bottom of the page and it isn't even properly formatted. Here is an image.
Here is the code for that, the navbar and their css, and the modal js file.
https://repl.it/repls/GrubbyInsubstantialAutosketch
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<div class="menu-center">
<input type="checkbox"id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png" >
<ul>
<li><a href="#home" class="active" > Home</a></li>
<li><a href="#quem-somos" >Quem somos</a></li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</div>
</nav>
<script src="scroll.js"></script>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
Here is my css file, that has both the navbar and the modal code.
/*I could not add the justify content tag, it made my navbar disappear, this is my navbars css*/
body {
overflow-x: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
nav {
height: 10vh;
background: #05031b;
opacity: 0.85;
transition: all 0.5s ease;
font-family: "Montserrat", sans-serif;
z-index: 1;
position: fixed;
width: 100%;
}
nav img {
height: 80px;
width: 80px;
margin-left: 5vh;
margin-top: 11px;
}
.social-media-icons {
position: absolute;
top: 10vh;
left: 0;
font-size: 8vh;
margin-right: 5vh;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #05031b;
color: white;
margin-top: 0px;
font-size: 40px;
}
.fa-instagram {
background: #05031b;
color: white;
top: 0;
font-size: 50px;
margin-right: 5vh;
}
nav ul{
float: right;
margin-right: 10px;
margin-top: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 5px 50px;
font-family: "Montserrat", sans-serif;
}
nav ul li a{
position: relative;
color: white;
font-size: 14px;
padding: 5px 6px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
nav ul li a:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgb(220,52,52);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s linear;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: left;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
nav .active a:hover {
color: rgb(220,52,52);
}
nav .active a {
color: rgb(220,52,52);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul {
margin: 0 0 0 0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li a{
padding: 32px 40px;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li {
list-style: none;
margin: 0 0 0 -4px;
display: inline;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
.active, #menu-center ul li a:hover {
font-size: 14px;
color: rgb(220,52,52);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);
}
a {
color: rgb(220,52,52);
}
#quem-somos {
color: rgb(220,52,52);
}
.cta {
padding: 9px 18px;
background-color: rgb(220,52,52);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
right: 0;
margin-left: 20px;
text-decoration: none;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
label #btn,
label #cancel{
color: red;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*This is the modals css*/
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with it */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire page */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
Now this is the modal.js, what controls the modals functions.
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") {
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) {
modal_container.style.display = "none";
}
}
You set an event handler for all links with href starting with '#' to scroll smoothly into view, but the href of the button that activates your modal windows is "#ex1". There is no "ex1" section in the document, which causes the script error.
A quick solution is to remove "#ex1" from the href attribute.
<a class="cta" rel="modal:open" href="" key="login" id="myBtn">Acessar</a>
Can I click on the hamburger menu and open it horizontally and verticaly at the same time..? You can see on the images what I exactly want basically I want an animation when I click on the hamburger so the logo moves to the far left and it all needs to be in the same speed. And social media needs to go verticaly.
Before clicking..
After clicking..
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background-image: url('https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
.logo-header {
width:50px;
position:absolute;
left: 40%;
top: 5px;
z-index: 100;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label><a href="https://stackoverflow.com/"><span class="logo-header">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/CARTOON_NETWORK_logo.png" width=80px> </span> </a>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>About</li>
<li>Conatact</li>
<li>Support</li>
<li>Marketing</li>
<li>About</li>
<li>Contact</li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
</div>
Thank you in advance
You can do it like this:
input[type=checkbox]:checked~.sidebarIconToggle~ a > .logo-header {
left: 0%;
transition: all 0.3s;
}
Also added transition: all 0.3s; to the class .logo-header
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
demo
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background-image: url('https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
input[type=checkbox]:checked~.sidebarIconToggle~a>.logo-header {
left: 0%;
transition: all 0.3s;
}
.topMenu{
list-style:none;
float:right;
color:#fff;
margin-right: -270px;
}
.topMenu li{
display:inline;
}
input[type=checkbox]:checked~.sidebarIconToggle~.topMenu {
margin-right: 70px;
transition: all 0.3s;
}
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<a href="https://stackoverflow.com/"><span class="logo-header">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/CARTOON_NETWORK_logo.png" width=80px> </span>
</a>
<ul class="topMenu">
<li>about us</li>
<li>contact</li>
<li>support</li>
</ul>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>About</li>
<li>Conatact</li>
<li>Support</li>
<li>Marketing</li>
<li>About</li>
<li>Contact</li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
</div>
I'm relying on increasing the top and bottom paddings of the center element to create a hover effect, seen below.
Keeping this effect, is there a way to do the following:
To make room for their respective icons, lower the text (help and logout) a little bit (I know I can do position: relative, and then top: 7px, for example, but that messes up the hover animation effect because the center of the 'white' expansion should be the center of the green header)
Now that the text is lowered, I want to add a transparent background sprite to each of the two 'buttons' - a question mark symbol for "help", and another symbol for "logout". So the background would still be green, and on top of the green background, I will see a symbol for each button, and the text below each symbol. If I simply do
.help {background: url() no-repeat -2px 0;}, for example, the image moves along with the hover effect because the height of the element is increased.
The sprites I'm going to using for the background/icons are in the form of:
{url(../theme/images/top_sprites.png) no-repeat -2px 0;}
So how can I use the sprites as Icons for these 'buttons' while keeping the text, the green background, as well as the animation? Note that the borders are added to make it clearer how the animation/effect works.
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>
You could animate a pseudoelement on the anchor.
Example:
.header {
min-height: 50px;
background-color: #008b10;
}
.menu {
padding: 0 16px;
font-family: Raleway, arial, sans-serif;
border: 1px solid blue;
}
.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
padding: 16px 5px;
display: inline-flex;
align-items: center;
flex-direction: column;
position: relative;
}
.menu a span {
position: relative;
}
.menu a:before {
transition: 0.4s;
content: '';
display: block;
position: absolute;
background: white;
opacity: 0;
transform: scaleY(.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.menu a:hover:before {
transform: scaleY(1);
opacity: 1;
}
.menu a img {
max-width: 15px;
display: block;
position: relative;
padding-bottom: 4px;
}
.menu a:hover {
color: #008b10;
}
<div class=header>
<div class="menu">
<a href="#">
<img src="https://unsplash.it/15">
<span>Help</span>
</a>
<a href="#">
<img src="https://unsplash.it/15">
<span>Logout</span>
</a>
</div>
</div>
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>
</a>
<a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>
---CSS---
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: url("../img/more-btn-bottom.png");
display: block;
position: absolute;
bottom: 0;
left: -0.25rem;
border: none;
transform: scale(0, 1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1, 1);
}
a.focused .a-border::after {
transform: none;
}
---JS---
function menuclick(underline) {
var focused = document.getElementsByClassName("focused");
var i;
for (i = 0; i < focused.length; i++) {
var under = focused[i];
if (under.classList.contains('focused')) {
under.classList.remove('focused');
}
}
if (!underline.parentElement.classList.contains('focused')) {
underline.parentElement.classList.add('focused');
}
}
---HTML---
<span class="a-border" onclick="menuclick(this)">ABOUT US</span>
<span class="a-border" onclick="menuclick(this)">CREATERS</span>
<span class="a-border" onclick="menuclick(this)">NEWS</span>
<span class="a-border" onclick="menuclick(this)">CONTACT</span>