I'm trying to create a multi-screen compatible navbar (mainly mobile and desktop users). I have created the styling I want for the navbar, however, I have a minor problem: When expanding the navbar on medium devices (768px or below) and then close it, if the user changes the resolution size to > 768px, the side navbar doesn't show.
function sideNavAction() {
let sidenav = document.getElementById("sideNavBar");
console.log(window.getComputedStyle(sidenav).display);
if (window.getComputedStyle(sidenav).display == "none") {
sidenav.style.display = "block";
} else {
sidenav.style.display = "none";
}
}
html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
font-family: "Poppins", sans-serif;
}
.mobile-nav {
height: 70px;
width: 100%;
position: fixed;
background-color: darkblue;
color: grey;
}
.nav-brand {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: #1a1a27;
}
.nav-heading {
display: inline-block;
}
.nav-heading h2 {
color: white;
white-space: nowrap;
}
.nav-icon {
text-align: center;
}
.sidenav {
display: none;
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: width 0.5s;
}
.sidenav .nav-brand {
padding: 25px 20px;
height: 50px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.sidenav .nav-heading h2 {
margin: 0;
color: white;
white-space: nowrap;
opacity: 1;
max-width: 0;
transition: 0.16s;
}
#expand-icon {
transition: transform 0.5s;
}
#sidenav-links {
margin: 15px 0px;
}
.sidenav-links a {
padding: 10px 18px;
display: block;
text-decoration: none;
color: #9697aa;
white-space: nowrap;
}
.link {
display: inline-block;
font-size: 20px;
padding-left: 15px;
vertical-align: middle;
color: #9697aa;
opacity: 1;
max-width: 100vw;
}
.active {
background-color: #1b1b28;
}
.active i {
color: #5d78ff;
}
.active .link {
color: white;
}
.fas {
vertical-align: middle;
}
#media only screen and (min-width: 768px) {
.mobile-nav {
display: none;
}
.sidenav {
display: block;
}
.sidenav .nav-brand {
display: flex;
}
.sidenav:not(:hover) {
width: 75px;
}
.sidenav:not(:hover) .nav-heading h2 {
opacity: 0;
max-width: 0;
visibility: hidden;
transition: 0.1s 0.2s;
}
.sidenav:not(:hover) #expand-icon {
transform: rotate(180deg);
}
.sidenav-links a:hover {
background-color: #1b1b28;
color: #5d78ff;
}
.sidenav-links a:hover .link {
color: white;
transition: none;
}
.sidenav:not(:hover) .link {
opacity: 0;
max-width: 0;
visibility: hidden;
transition: 0.1s 0.2s;
}
}
#media only screen and (max-width: 768px) {
.sidenav .nav-brand {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Online CV</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/6cc49d804e.js"
crossorigin="anonymous"
></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="mobile-nav">
<div class="nav-brand">
<div class="nav-heading">
<h2>Navbar</h2>
</div>
<div class="nav-icon">
<button onclick="sideNavAction()">
<i id="collapse-icon" class="fas fa-fw fa-bars fa-2x"></i>
</button>
</div>
</div>
</div>
<div class="sidenav" id="sideNavBar">
<div class="nav-brand">
<div class="nav-heading">
<h2>Navbar</h2>
</div>
<div class="nav-icon">
<i id="expand-icon" class="fas fa-fw fa-angle-double-left fa-2x"></i>
</div>
</div>
<div class="sidenav-links">
<a class="active" href="#">
<i class="fas fa-fw fa-id-card fa-2x"></i>
<p class="link">Link 1</p>
</a>
<a href="#">
<i class="fas fa-fw fa-graduation-cap fa-2x"></i>
<p class="link">Link 2</p>
</a>
<a href="#">
<i class="fas fa-fw fa-briefcase fa-2x"></i>
<p class="link">Link 3</p>
</a>
<a href="#">
<i class="fas fa-fw fa-smile-beam fa-2x"></i>
<p class="link">Link 4</p>
</a>
</div>
</div>
</body>
</html>
I realize that my JS function is the cause of this, as it sets the display of the side nav to 'none', but I am unable to think of an elegant solution.
A couple of things.
Inline eventlisteners are frowned upon.
Better to listen for click events via Javascript.
You added a stye of display: none; and there is no eventListener or media query to change it once the width increased beyond the threshold.
This codepen has the above adjustments:
https://codepen.io/riza-khan/pen/poJEOYE?editors=1111
And should work as intended.
However, I added a media query and targeted the nav class with a !important tag. That should, ideally, never be done. I would suggest, removing the !important and playing around with the code until it works without it.
Hope this helped.
Thanks to #chriskirknielsen, I was able to come up with this solution which fixed the problem I was having.
/* --- Function to Open/Close Mobile Nav --- */
function sideNavAction() {
let sidenav = document.getElementById("sideNavBar");
if (sidenav.classList.contains("sidenav-mobile-visible")) {
sidenav.classList.remove("sidenav-mobile-visible");
} else {
sidenav.classList.add("sidenav-mobile-visible");
}
}
Then added this in my css file
.sidenav-mobile-visible {
display: block;
}
Why aren't you using Bootstrap "navbar" component? This is the solution to your problem.
Bootstrap navbar is responsive for desktop and mobile devices. You are not required to mention screen sizes there in pixels. Here is the link of the Bootstrap library. You have to just integrate Bootstrap to your html document via Bootstrap CDN on the given link.
https://getbootstrap.com/docs/4.4/components/navbar/
Related
You want to implement the Top Menu and Left Side Menu.
The top menu is fixed to the top.
I want to implement the Left Side Menu so that it can be seen right below the Top Menu, but it is not going well.
If we open the Left Side Menu, we would like to solve the problem of covering the top menu, so please give us some advice.
index.html code
<!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">
<!-- CSS Link -->
<link rel="stylesheet" href="assets/css/left_sidemenu.css">
<link rel="stylesheet" href="assets/css/top_menu.css">
<!---Fontawsome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<!----Jquery CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<title>SideBar sub menus</title>
</head>
<body id="body-pd">
<!-- top_menu -->
<nav class="navbar ">
<!-- logo_link -->
<div class="navbar__logo">
<i class="fa-solid fa-laptop-code"></i>
Project
</div>
<!-- menu_link -->
<ul class="navbar__menu">
<li>Login</li>
<li>Sign</li>
</ul>
</nav>
<!-- top_menu -->
<!-- left_sidemenu -->
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
Bedimcode
</div>
<div class="nav__list">
<a href="#" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Messenger</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="folder-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Projects</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Analytics</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Settings</span>
</a>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Log out</span>
</a>
</div>
</nav>
</div>
<!-- left_sidemenu -->
<h1>Componentes</h1>
<!-- IONICONS -->
<script src="https://unpkg.com/ionicons#5.2.3/dist/ionicons.js"></script>
<!-- JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
left_sidemenu.css code
/* left_sidemenu.css */
/* GOOGLE FONTS */
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap");
/* VARIABLES CSS */
:root {
--nav--width: 92px;
/* Colores */
--first-color: #0c5df4;
--bg-color: #12192c;
--sub-color: #b6cefc;
--white-color: #fff;
/* Fuente y tipografia */
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/* z index */
--z-fixed: 100;
}
/* BASE */
*, ::before, ::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
/* l NAV */
.l-navbar {
position: fixed;
/* top: 0; */
left: 0;
width: var(--nav--width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/* NAV */
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle {
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo {
color: var(--white-color);
font-weight: 600;
}
.nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
}
.nav__link:hover {
background-color: var(--first-color);
}
.nav__icon {
font-size: 1.25rem;
}
.nav_name {
font-size: var(--small-font-size);
}
/* Expander menu */
/* width: calc(var(--nav--width) + 9.25rem); */
.expander {
width: calc(var(--nav--width) + 12rem);
}
/* Add padding body*/
.body-pd {
padding: 2rem 0 0 16rem;
}
/* Active links menu */
.active {
background-color: var(--first-color);
}
/* COLLAPSE */
.collapse {
grid-template-columns: 20px max-content 1fr;
}
.collapse__link {
justify-self: flex-end;
transition: .5;
}
.collapse__menu {
display: none;
padding: .75rem 2.25rem;
/*
padding: 0px;
margin: 0px;
overflow: auto;
position: fixed;
*/
}
.collapse__sublink {
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover {
color: var(--white-color);
}
/* Show collapse */
.showCollapse {
display: block;
}
/* Rotate icon */
.rotate {
transform: rotate(180deg);
transition: .5s;
}
left_sidemenu.js code
/* left_sidemenu.js */
/* EXPANDER MENU */
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if( toggle && navbar ) {
toggle.addEventListener('click', ()=>{
navbar.classList.toggle('expander');
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle', 'navbar', 'body-pd')
/* LINK ACTIVE */
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
/* COLLAPSE MENU */
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for(i=0;i<linkCollapse.length;i++) {
linkCollapse[i].addEventListener('click', function(){
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
});
}
top_menu.css code
/* top_menu.css */
:root {
--text-color: #f0f4f5;
--background-color: #12192c;
--accent-color: orange;
--icons-color: rgb(152, 187, 201);
--bodybackground-color: rgb(255, 255, 255);
}
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 75px;
}
a {
font-size: 20px;
text-decoration: none;
color: var(--text-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--background-color);
padding: 8px 12px;
font-family: 'STIX Two Math';
position: fixed;
/* width: 100% */
top: 0;
left: 0;
right: 0;
}
.navbar__logo i {
color: var(--accent-color);
padding-left: 0;
}
.navbar__menu {
list-style: none;
display: flex;
margin: 0;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 30px;
}
.navbar__menu li:hover {
background-color: var(--accent-color);
border-radius: 3px;
}
#media screen and (max-width: 700px) {
}
#font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve#1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
font: normal 1rem/1.5rem 'Cafe24Oneprettynight', serif;
background: url('https://images.unsplash.com/photo-1505312926838-645f295a20e1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1234&q=80')no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 50px;
background: rgba(0, 0, 0, .4);
}
p {
color: #aaa;
margin-bottom: 10px;
}
p:hover {
color: #fff
}
p:hover {
width: 100%;
transition: width .3s;
}
Screenshot 1
Screenshot 2
This is happening bcs you've added padding to the top_menu item. It can be fixed by reducing the padding you've given in the top_menu.css file like so:
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 45px;
}
As for the nav bar covering the header once expanded. The reason it is happening is because you're adding padding to the existing element. I would change the left_sidemenu.css file like so:
/* Add padding body*/
.body-pd {
/* padding: rem 0 0 16rem; */
}
Either that or you can simply not add top padding so that the nav bar only expands to the side. One other option I could suggest instead, is to change the z-index so that the nav bar comes behind the header.
I am trying to make a simple social network website. I am using a top navigation panel and a side navbar.
The problem I am facing is that I am not able to add any components in the blank area that you are able to see in the image.
This is my HTML body with the CSS I am using:-
//css code for sidebar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #D96AA7;
--secondary-color: #422C73;
--complimentary-color: #88BFB5;
--contrast-color: #F2E527;
--light-color: #D2A9D9;
}
.container {
background: #191919;
min-height: 100vh;
font-family: Montserrat, sans-serif;
}
nav a {
font-size: 40px;
color: #fff;
text-decoration: none;
padding: 20px;
text-align: center;
}
nav {
position: fixed;
left: 0;
z-index: 50;
display: flex;
justify-content: space-around;
flex-direction: column;
height: 100vh;
background: var(--secondary-color);
}
section {
position: absolute;
top: 0;
height: 100vh;
width: 0;
opacity: 0;
transition: all ease-in .5s;
display: flex;
justify-content: center;
align-items: center;
}
/* Styles applied on trigger */
section:target {
opacity: 1;
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
section:target h1 {
opacity: 0;
animation: 2s fadeIn forwards .5s;
}
#first {
background:var(--primary-color);
}
#second {
background: var(--complimentary-color);
}
#third {
background: var(--contrast-color);
}
#fourth {
background: var(--light-color);
}
#keyframes fadeIn {
100% { opacity:1 }
}
//css code for top navigation
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<body>
<style>
a {
text-decoration: none;
color: white;
}
</style>
<!--this is the top navigation bar-->
<div class="topnav" id="myTopnav">
Home
Chit-Chat
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!--this is side navbar-->
<nav>
<a href="#first"
><abbr title="PROGRAMMING"
><img src="assets/programming.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#second"
><abbr title="SINGING"
><img src="assets/singing.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#third"
><abbr title="DANCING"
><img src="assets/dancing.png" height="100" ,width="100" /></abbr
></a>
<a href="#fourth"
><abbr title="PAINTING"
><img src="assets/painting.jpg" height="100" ,width="100" /></abbr
></a>
</nav>
<div class="container">
<section id="first">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="second">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="third">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="fourth">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
</div>
</body>
my side navbar opens a div with a close button for now in it as you might be able to see
but I don't understand where I should put the code I want in the blank space.
if I am adding it after my side navbar code it is displaying it in a space under the blank area.
I am using the code for the side navbar from the internet, that is why i am not able to figure it out
pls help
this is my html, css and js code below for side bar menu in bootstrap. the problem is is the header toggle and any other icon is not showing on the menu so i can't expand the menu also all the icons i used from box icons are not showing (also i imported https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css) , is there a way to fix this?
thanks in advance
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
:root {
--header-height: 3rem;
--nav-width: 68px;
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100
}
*,
::before,
::after {
box-sizing: border-box
}
body {
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s
}
a {
text-decoration: none
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s
}
.header_toggle {
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem
}
.show {
left: 0
}
.body-pd {
padding-left: calc(var(--nav-width) + 1rem)
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
#media screen and (min-width: 768px) {
body {
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem)
}
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.show {
width: calc(var(--nav-width) + 156px)
}
.body-pd {
padding-left: calc(var(--nav-width) + 188px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="/assets/images/logo.png" rel="icon" type="icon"> -->
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/scripts.js"> </script>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css'>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span>
<div class="nav_list"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </div>
</div> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span>
</nav>
</div>
<!--Container Main start-->
<div class="height-100 bg-light">
<h4>Main Components</h4>
</div>
<!--Container Main end-->
You can keep the following code in your head tag. Found this cdn link from there official web page.
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
This worked for me
Change your bootstrap cdn with this
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
And add some css code
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 0px;
}
MUST work
so hello i'm trying to create a navbar and things were going pretty well , but when i was working at the responsivity of the navbar my addeventlistener function doesn't work:
here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Nav</title>
</head>
<body>
<nav class="navbar">
<h4 class="logo">Nav</h4>
<ul class="navlinks">
<li>
<a href="#" >Home</a>
</li>
<li>
<a href="#" >Work</a>
</li>
<li>
<a href="#" >About us</a>
</li>
<li>
<a href="#" >Projects</a>
</li>
</ul>
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</body>
</html>
my css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: black;
font-family: 'Poppins', sans-serif;
}
.logo{
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.navlinks{
display: flex;
justify-content: space-around;
width: 30%;
}
.navlinks a:hover{
background-color: rgb(37, 156, 196);
}
.navlinks li{
list-style: none;
}
.navlinks a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
cursor: pointer;
display: none;
}
.burger div{
width: 25px;
height: 2px;
background-color: white;
margin: 5px;
}
#media screen and (max-width:1024px){
.navlinks{
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navlinks{
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navlinks li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
and here's my javascript code:
const navSlide = () => {
const burger = document.querySelector('.burger')
const nav = document.querySelector('.navlinks')
burger . addEventListener('click',()=>{
nav.classList.toggle('nav-active')
})
}
navSlide();
i am pretty new at this forum but i heard that it was the most popular one and my code lines were making me mad so yeah and thanks again for answering my post
glad to see you're new here and decided to join!
Without using jQuery, you can use this:
const navSlide = () => {
const burger = document.querySelector('.burger')
const nav = document.querySelector('.navlinks')
burger . addEventListener('click',()=>{
nav.classList.toggle('nav-active')
})
}
document.addEventListener("DOMContentLoaded", function(event) {
navSlide();
});
Put basically, this code will wait until the page loads (so that all elements exist within the DOM which means document.querySelector will work) and then it attaches the event listener. This is best practice to avoid issues with slow rendering browsers and such without relying on the browser to render the script last.
im not much of a coder but this code has worked for many people and I've spent hours trying to find my error. when I click the hamburger menu the slide menu off to the right is supposed to slide into view and fade the buttons in from opacity 0 to opacity 1. none of this happens at all which makes me think I have a js error.
any help would be great.
jsfiddle below
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')
burger.addEventListener('click', ()=>{
nav.classlist.toggle('nav-active');
});
}
navSlide();
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Raleway:100,200,400,600,700,900&display=swap');
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
height: 2.5em;
background-color:#7BC58A;
position: sticky;
top: 0;
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
font-size: .8rem;
text-align: left;
padding-left: 6em;
padding-top: .4em;
}
.logo-image{
width: 50px;
height: 50px;
overflow: hidden;
margin: 0 0em;
}
nav{
display:flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
}
.nav-links{
display:flex;
justify-content: space-around;
width:45%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color:#5A5A5A;
font-size:.75em;
text-transform:uppercase;
text-decoration: none;
font-family: 'Raleway', sans-serif;
font-weight:600;
}
.nav-links a:hover{
color:#7BC58A;
}
.nav-links a:active {
color: #D1D1D1;
}
.burger{
display: none;
float:right;
position: relative;
top:0px;
}
.burger div{
width:25px;
height:3px;
background-color:#5a5a5a;
margin: 3px;
border-radius: 40px;
cursor: pointer;
}
#media screen and (max-width:1024px){
.nav-links{
width:55%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height:92vh;
top: 8vh;
background-color: #7BC58A;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translate(100%);
}
.nav-links li{
opacity:1;
}
.burger{
display:block;
}
}
.nav-active{
transform:translatex(100%)
}
#keyframes navLinksFade{
from{
opacity:0;
transform:translateX(50px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="header">
<i class="fa fa-phone"></i> (209)838-1934 <i class="fa fa-envelope"></i> inquiry#allseasonlawn.net
</section>
<!-- NAVIGATION STARTS-->
<nav id="nav">
<a class="navbar-brand" href="/">
<div class="logo-image">
<img src="images/navbar_logo_50x50.png" class="img-fluid">
</div>
</a>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Reviews</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
https://jsfiddle.net/robertrlamb96/3yuzok8r/1/
You had two problems with adding the class. First was you were trying to attach the event listener before the browser has parsed (read) the full html. In other words, the browser didn't know what "burger" or "nav" referred to. To overcome this you need to run the script as part of an onload method. Note, in JSFiddle you have to set the Load type to "no wrap bottom of " to have access to this and I do not believe SO snippets support this feature.
The second error was that "classList" was misspelled (the 'l' is capitalized). I believe you still have some work to do to get it working, but this gets the script running.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')
burger.addEventListener('click', ()=>{
nav.classList.toggle('nav-active');
});
}
onload = ()=>{
navSlide();
};
https://jsfiddle.net/6qj0kwmg/