i am trying to develop a "dashboard" style website, using php, javascript, html and css. After i made the sidebar, i am trying to change the "page", like, the user is in the home page, after he clicks in any icon of the sidebar, he would change the section (it was hidden, now it is show, for example), without changing the page. I am using a script that i used in another website that i made, but can't figure it out to work in this project, i don't know if it is because i am using php (in the other project, i didn't), or i am messing up the code. If anyone can help, i would appreciate ;)
!(function($) {
"use strict";
// Nav Menu
$(document).on('click', '.nav-menu a, .mobile-nav a', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var hash = this.hash;
var target = $(hash);
if (target.length) {
e.preventDefault();
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if (hash == '#home') {
$('#home').removeClass('home-top');
$("section").removeClass('section-show');
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return;
}
if (!$('#home').hasClass('home-top')) {
$('#home').addClass('home-top');
setTimeout(function() {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}, 350);
} else {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}
$('html, body').animate({
scrollTop: 0
}, 350);
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate/show sections on load with hash links
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
$('#home').addClass('home-top');
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$('.nav-menu, .mobile-nav').find('a[href="' + initial_nav + '"]').parent('li').addClass('active');
setTimeout(function() {
$("section").removeClass('section-show');
$(initial_nav).addClass('section-show');
}, 350);
}
}
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
background: #2d2d2d;
display: flex;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
color: white;
padding: 16px;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #0f0f0f;
padding: 6px 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;
padding-left: 20px;
}
.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 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: #0f0f0f;
}
.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: #0f0f0f;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #0f0f0f;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #2d2d2d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #0f0f0f;
}
.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: #0f0f0f;
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: #0f0f0f;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
right: 40%;
}
.home-section{
position: relative;
background: #E4E9F7;
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;
}
}
.main {
background-color: #0f0f0f;
width: 100%;
padding: 50px;
margin-left: 110px;
margin-top: 60px;
margin-bottom: 60px;
margin-right: 60px;
border-radius: 50px;
display: flex;
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/painel.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<title>Prosw Treinamentos</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<div class="logo_name">Prosw Cursos</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<nav>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li class="active">
<a href="#home">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Videos</span>
</a>
<span class="tooltip">Videos</span>
</li>
<li>
<a href="#duvidas">
<i class='bx bx-chat' ></i>
<span class="links_name">Duvidas</span>
</a>
<span class="tooltip">Duvidas</span>
</li>
<li>
<a href="#tutorial">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Tutorial de uso</span>
</a>
<span class="tooltip">Tutorial</span>
</li>
<li>
<a href="#settings">
<i class='bx bx-cog' ></i>
<span class="links_name">Configurações</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</nav>
</div>
<div class="main">
<section id="home" class="home-top">
<div class="content">
<header>
<h1>Treinamentos</h1>
</header>
</div>
</section>
<section id="duvidas">
<div class="content">
<header>
<h1>Dúvidas</h1>
</header>
</div>
</section>
<section id="tutorial">
<div class="content">
<header>
<h1>Tutorial</h1>
</header>
</div>
</section>
<section id="settings">
<div class="content">
<header>
<h1>Configurações</h1>
</header>
</div>
</section>
</div>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
<script src="js/main.js"></script>
</body>
</html>
You have not added the jquery library
add this
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Related
Hello I have a project for my studies which is to display data on a dashboard that will be more or less modifiable by the user according to his needs.
I'm trying to open a modal window but it doesn't work and i can't figure out where my mistake came from.
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelector(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: var(--body-color);
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: flex;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-customize modal-trigger'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay modal-trigger">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>
Adding to the earlier answer, the modal window doesn't close on clicking the close button. It only closes by clicking outside of it. This should solve it all: remove the modal-trigger class in the overlay class. It should be <div class="overlay"> not <div class="overlay modal-trigger"> and for demonstration, I changed the background colour
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: purple;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#" class="modal-trigger">
<i class='bx bx-customize'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
</body>
</html>
It should be working now, remember that querySelector() only grab the first match, you should use querySelectorAll() method instead, that is iterable and grabs all elements that match.
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: var(--body-color);
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: flex;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-customize modal-trigger'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay modal-trigger">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>
I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css
I need my dropdown menu under About menu and align in center of about menu. And when my site in moblie size dropdown are not in the center, They are on the right of site. I tried to coding dropdown link1hhh, link2, link3 to be the center but it's not align. What's wrong about html, css code
so I want Dropdown be like this.
Thanks
const body = document.querySelector("body");
const navbar = document.querySelector(".navbarr");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = ()=>{
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
.navbarr{
padding-top: 85px;
padding-bottom: 30px;
background: #ffffff;
position: sticky;
top: 0;
width: 100%;
z-index: 2;
transition: all 0.3s ease;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbarr.sticky{
background: #ffffff;
padding: px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbarr .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbarr .logo a{
color: #000000;
font-size: 30px;
text-decoration: none;
}
.navbarr .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #000000;
margin-left: 25px;
text-decoration: none;
font-weight: normal;
transition: all 0.3s ease;
}
.icon{
color: #000000;
font-size: 25px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 80px;
top: 110px;
}
#media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content{
padding: 0 40px;
margin-left: 5%;
margin-right: 5%;
}
}
#media (max-width: 900px) {
.content{
padding: 0 40px;
margin-left: 0%;
margin-right: 0%;
}
.menu-list .cancel-btn{
position: absolute;
right: 50px;
top: 110px;
}
}
#media (max-width: 1000px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbarr .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 100%;
right: -100%;
top: 0px;
display: block;
padding: 100px 0;
text-align: center;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.navbarr.show .menu-list{
right: 0%;
}
.navbarr .menu-list li{
margin-top: 45px;
}
.navbarr .menu-list li a{
font-size: px;
margin-right: -100%;
}
.navbarr.show .menu-list li a{
margin-right: 0px;
}
}
<nav class="navbarr">
<div class="content">
<div class="logo">
<img src="" width="80" height="80" alt="" />
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Menu</li>
<li class="dropdown">
About
<div class="dropdown-content">
Link 1hhh
Link 2
Link 3
</div>
<li>Contact</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
Remove position: absolute; from .dropdown-content:
const body = document.querySelector("body");
const navbar = document.querySelector(".navbarr");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = ()=>{
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
.navbarr{
padding-top: 85px;
padding-bottom: 30px;
background: #ffffff;
position: sticky;
top: 0;
width: 100%;
z-index: 2;
transition: all 0.3s ease;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbarr.sticky{
background: #ffffff;
padding: px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbarr .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbarr .logo a{
color: #000000;
font-size: 30px;
text-decoration: none;
}
.navbarr .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #000000;
margin-left: 25px;
text-decoration: none;
font-weight: normal;
transition: all 0.3s ease;
}
.icon{
color: #000000;
font-size: 25px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 80px;
top: 110px;
}
#media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content{
padding: 0 40px;
margin-left: 5%;
margin-right: 5%;
}
}
#media (max-width: 900px) {
.content{
padding: 0 40px;
margin-left: 0%;
margin-right: 0%;
}
.menu-list .cancel-btn{
position: absolute;
right: 50px;
top: 110px;
}
}
#media (max-width: 1000px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbarr .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 100%;
right: -100%;
top: 0px;
display: block;
padding: 100px 0;
text-align: center;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.navbarr.show .menu-list{
right: 0%;
}
.navbarr .menu-list li{
margin-top: 45px;
}
.navbarr .menu-list li a{
font-size: px;
margin-right: -100%;
}
.navbarr.show .menu-list li a{
margin-right: 0px;
}
}
/* added */
#media (max-width: 1000px) {
.dropdown-content {
position: initial;
}
<nav class="navbarr">
<div class="content">
<div class="logo">
<img src="" width="80" height="80" alt="" />
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Menu</li>
<li class="dropdown">
About
<div class="dropdown-content">
Link 1hhh
Link 2
Link 3
</div>
<li>Contact</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
How to let the background full this #68A4C4 color and is under another picture ?
I want to like this pictureenter image description here, but I only can do like thisenter image description here
I am a newbie in html and css, I try so many times, but didn't work.
this is my css code and html code thank you!
/**
* Template Name: Moderna - v2.1.0
* Template URL: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #444;
}
a {
color: #4fa6d5;
}
a:hover {
color: #45beff;
text-decoration: none;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
display: none;
width: 40px;
height: 40px;
border-radius: 3px;
right: 15px;
bottom: 15px;
background: #68A4C4;
color: #fff;
transition: display 0.5s ease-in-out;
z-index: 99999;
}
.back-to-top i {
font-size: 24px;
position: absolute;
top: 8px;
left: 8px;
}
.back-to-top:hover {
color: #fff;
background: #85b6cf;
transition: background 0.2s ease-in-out;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
height: 80px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
padding: 20px 0;
background: #1e4356;
}
#header.header-transparent {
background: none;
}
#header.header-scrolled {
background: rgba(30, 67, 86, 0.8);
height: 60px;
padding: 10px 0;
}
/*會跟著滾動的微學分整合資訊系統，但是手機板無法 會跑版 待解決。*/
#header .logo span {
font-size: 30px;
margin: 0;
padding: 0 0 0 300px;
line-height: 1;
font-weight: 400;
letter-spacing: 8px; /*字母间距*/
}
#header .logo h1 a, #header .logo h1 a:hover {
color: #fff;
text-decoration: none;
}
#header .logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
#main {
margin-top: 80px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
.nav-menu a {
display: block;
position: relative;
color: #fff;
padding: 10px 15px;
transition: 0.3s;
font-size: 14px;
font-family: "Open Sans", sans-serif;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
color: #a2cce3;
text-decoration: none;
}
.nav-menu .drop-down ul {
display: block;
position: absolute;
left: 0;
top: calc(100% - 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: ease all 0.3s;
}
.nav-menu .drop-down:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.nav-menu .drop-down li {
min-width: 180px;
position: relative;
}
.nav-menu .drop-down ul a {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #1c3745;
}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
color: #68A4C4;
}
.nav-menu .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {
top: 0;
left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {
opacity: 1;
top: 0;
left: 100%;
}
.nav-menu .drop-down .drop-down > a {
padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\eaa0";
font-family: IcoFont;
position: absolute;
right: 15px;
}
#media (max-width: 1366px) {
.nav-menu .drop-down .drop-down ul {
left: -90%;
}
.nav-menu .drop-down .drop-down:hover > ul {
left: -100%;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\ea9d";
}
}
/* Mobile Navigation */
.mobile-nav {
position: fixed;
top: 0;
bottom: 0;
z-index: 9999;
overflow-y: auto;
left: -260px;
width: 260px;
padding-top: 18px;
background: #1e4356;
transition: 0.4s;
}
.mobile-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav a {
display: block;
position: relative;
color: #ddecf5;
padding: 10px 20px;
font-weight: 500;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
color: #a2cce3;
text-decoration: none;
}
.mobile-nav .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 10px;
position: absolute;
right: 15px;
}
.mobile-nav .active.drop-down > a:after {
content: "\eaa0";
}
.mobile-nav .drop-down > a {
padding-right: 35px;
}
.mobile-nav .drop-down ul {
display: none;
overflow: hidden;
}
.mobile-nav .drop-down li {
padding-left: 20px;
}
.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 15px;
z-index: 9998;
border: 0;
background: none;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #fff;
}
.mobile-nav-overly {
width: 100%;
height: 100%;
z-index: 9997;
top: 0;
left: 0;
position: fixed;
background: rgba(30, 67, 86, 0.9);
overflow: hidden;
display: none;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav {
left: 0;
}
.mobile-nav-active .mobile-nav-toggle i {
color: #fff;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#header h1 {
color: #fff;
margin-bottom: 30px;
font-size: 48px;
font-weight: 700;
}
#hero {
width: 100%;
height: 90vh;
overflow: hidden;
position: relative;
}
#hero::after {
background: #68A4C4;
padding: 0 0 30px 0;
color: #68A4C4;
font-size: 14px;
}
/*
#hero::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 130%;
height: 96%;
background: url("../img/tree.jpg" );
opacity: 0.3;
z-index: 0;
border-radius: 0 0 50% 50%;
transform: translateX(-50%) translateY(18px) rotate(2deg);
}
*/
#hero .carousel-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.test{
padding: 0 0 0 100px;
margin-top: -150px;
}
.input-group{
padding: 0 0 0 500px;
}
#hero h2 {
color: #fff;
margin-bottom: 30px;
font-size: 48px;
font-weight: 700;
}
#hero p {
width: 80%;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
margin: 0 auto 30px auto;
color: #fff;
}
.picture{
margin-top: -300px;
float:right;
}
.picture2{
padding: 0 50 0 500px;
}
#media (min-width: 1024px) {
#hero p {
width: 60%;
}
#hero .carousel-control-prev, #hero .carousel-control-next {
width: 5%;
}
}
#media (max-width: 768px) {
#hero::after {
width: 180%;
height: 95%;
border-radius: 0 0 50% 50%;
transform: translateX(-50%) rotate(0deg);
}
#hero::before {
top: 0;
width: 180%;
height: 94%;
border-radius: 0 0 50% 50%;
transform: translateX(-50%) translateY(20px) rotate(4deg);
}
}
#media (max-width: 575px) {
#hero h2 {
font-size: 30px;
}
#hero::after {
left: 40%;
top: 0;
width: 200%;
height: 95%;
border-radius: 0 0 50% 50%;
transform: translateX(-50%) rotate(0deg);
}
#hero::before {
left: 50%;
top: 0;
width: 200%;
height: 94%;
border-radius: 0 0 50% 50%;
transform: translateX(-50%) translateY(20px) rotate(4deg);
}
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
background: #0b212d;
padding: 0 0 30px 0;
color: #fff;
font-size: 14px;
}
#footer .copyright {
text-align: center;
padding-top: 30px;
}
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>微學分整合資訊系統</title>
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Moderna - v2.1.0
* Template URL: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top header-transparent">
<div class="container">
<div class="logo float-left">
<!-- Uncomment below if you prefer to use an image logo -->
<img src="assets/img/logo.png" alt="" class="img-fluid"><span style="color:white;" >微學分整合資訊系統</span>
</div>
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex justify-cntent-center align-items-center">
<div id="heroCarousel" class="container carousel carousel-fade" data-ride="carousel">
<!-- Slide 1 -->
<div class="carousel-item active">
<div class="carousel-container">
<div class="container">
<div class="test">
<img src="assets/img/graduated.png" alt="" class="img-fluid">
</div>
</div>
<div class="container">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email" style=width:200px>
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password" style=width:200px>
</div>
</form>
</div>
</div>
</div>
</div>
</section><!-- End Hero -->
<!--picture-->
<div class="picture">
<div class="col-md-3">
<div align="right">
<img src="assets/img/tree.png" class="img-fluid" alt="">
</div>
</div>
</div>
<div class="picture">
<img src="assets/img/cloud.png" class="img-fluid" alt="">
</div>
<i class="icofont-simple-up"></i>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms & Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}
Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.