I have made 2 icon pngs that I would like to use instead of the ones I have here from Font Awesome. But how do I insert them? I can't browse through pictures when I select class <label for="" class="cancel-btn"><i *class="fas fa-times"*></i></label but it doesn't seem to work at all.
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'
}
nav {
background: #036832;
position: fixed;
width: 100%;
z-index: 999;
}
nav .wrapper {
/* border */
max-width: 1250px;
padding: 0 5px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 65px;
}
.wrapper .nav-links {
display: inline-flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
/* menu bar */
color: white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 4px;
transition: all 0.4s ease;
}
.nav-links li a:hover {
background: #213B35;
}
.nav-links .drop-menu {
background: #046832;
line-height: 45px;
position: absolute;
opacity: 0;
visibility: hidden;
}
.nav-links li:hover .drop-menu {
opacity: 1;
visibility: visible;
transition: all 0.4s ease;
}
.drop-menu li a {
/* drop menu teksten */
display: block;
font-weight: 400;
border-radius: 10px;
}
div.picture1 {
width: 153px;
height: 60px;
background-image: url('Carlsberglogof.png');
}
.nav-links .mobile-item {
display: none;
}
#media screen and (max-width: 970px) {
/* drop menu mobil */
.wrapper .nav-links {
position: fixed;
display: block;
height: 100vh;
width: 100%;
max-width: 350px;
background: #046832;
top: 0;
left: 0;
overflow-y: auto;
line-height: 50px;
padding: 50px 10px;
box-shadow: 2px 15px 15px;
}
.nav-links li {
margin: 10px 10px;
}
.nav-links li a {
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu {
position: static;
opacity: 1;
visibility: visible;
padding-left: 10px;
max-height: 0px;
overflow: hidden;
}
#showdrop:checked~.drop-menu {
max-height: 100%;
}
.nav-links .drop-menu li {
margin: 0;
}
.nav-links .drop-menu li a {
font-size: 18px;
}
.nav-links .desktop-item {
display: none;
}
.nav-links .mobile-item {
display: block;
font-size: 20px;
color: white;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.4s ease;
}
.nav-links .mobile-item:hover {
background: #213B35;
}
}
.wrapper input {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Carlsberg</title>
<link rel="stylesheet" href="Style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="wrapper">
<div class="picture1"> </div>
<ul class="nav-links">
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
<li>Forside</li>
<li>
Mød os
<input type="checkbox" id="showdrop">
<label for="showdrop" class="mobile-item">Mød os</label>
<ul class="drop-menu">
<li>Organisation</li>
<li>Historien bag</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
</div>
</nav>
</body>
</html>
Hope someone can help, have a good day! :D
Just do it with an img tag:
<img src="your_icon_src" alt="" width="20" height="20">
Related
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
I want to make a responsive navigation on my website.
i didn't use a grid
I tried
#media screen and (max-width: 600px) {
.menu{
height: 100%;
width: 15px;
float: top;
}}
but that don't work
I want it to get on the top of my website
So some suggestions:
Send the html code or jsut some of it.
You can also try adding margin: 0; to the body:
body{
margin: 0;
}
You will also need to add a background - color:
.menu {
background-color: red;
}
And more stuff could be added but you can check this:
https://www.w3schools.com/howto/howto_css_style_header.asp
This helps a lot
You can use this codepen which I had made yesterday or may be before that, I don't remember :-
https://codepen.io/CodingPencil/pen/abEWzXp
Or just copy my code here :-
HTML -
<nav>
<div>
Something
</div>
<div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="menu" id="menu">
<span></span>
<span></span>
<span></span>
</div>
</nav>
CSS -
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--nav-bg: #03000e;
--main-clr: dodgerblue;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
width: 100%;
background: #03000e;
}
nav .logo {
color: #fff;
text-decoration-color: var(--main-clr);
font-size: 22px;
font-family: "Playfair Display", serif;
font-weight: 100;
}
nav ul {
--padding: 20px;
--font-size: 17px;
list-style: none;
display: flex;
align-items: center;
font-size: var(--font-size);
overflow-y: hidden;
transition: 1s ease;
}
nav ul li {
padding: var(--padding);
}
nav ul li a {
color: #fff;
text-decoration: none;
position: relative;
}
nav ul li a::after {
content: "";
width: 0%;
height: 2.5px;
border-radius: 99px;
background: var(--main-clr);
position: absolute;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
nav ul li a:hover::after {
width: 100%;
}
nav .menu {
width: 22px;
height: 16px;
cursor: pointer;
display: none;
align-items: center;
flex-direction: column;
justify-content: space-between;
position: relative;
margin: 20px;
}
nav .menu span {
width: 100%;
height: 2px;
border-radius: 99px;
background: #fff;
transition: 0.3s ease;
transform-origin: left;
}
nav .menu.active span {
background: var(--main-clr);
}
nav .menu.active span:nth-child(1) {
transform: rotate(40deg);
}
nav .menu span:nth-child(3) {
transform-origin: left;
}
nav .menu.active span:nth-child(3) {
transform: rotate(-40deg);
}
nav .menu.active span:nth-child(2) {
transform: scale(0);
}
#media (max-width: 910px) {
nav .menu {
display: flex;
}
nav ul {
--height: 0px;
flex-direction: column;
background: var(--nav-bg);
position: absolute;
width: 100%;
left: 0;
top: 56px;
height: var(--height);
transition: 1s ease;
}
nav ul.active {
--height: calc(
(((var(--padding) * 2) + (var(--font-size) * 1.5))) * var(--childenNumber)
);
transition: 1s ease;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li a {
width: 100%;
text-transform: capitalize;
}
}
And the JAVASCRIPT -
const navigation = document.getElementById("nav");
const menu = document.getElementById("menu");
menu.addEventListener("click", () => {
navigation.style.setProperty("--childenNumber", navigation.children.length);
navigation.classList.toggle("active");
menu.classList.toggle("active");
});
There are many references available on the web you can take references from w3schools.com, bootstrap, codepen etc.
try below one,
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
References:
https://getbootstrap.com/docs/5.0/components/navbar/
https://www.w3schools.com/css/css_navbar.asp
Note: float:top is not working
I am trying to create a navbar but the animation are not working, As you can see, I have put position: fixed; and right: -100%; to the .nav-links so that it can hide and not create white space at the right and #nav-btn:checked~.nav-links { right: 0; width: 100% !important; }
And when I click at the checkbox it does not show the animation and appear without any animation and that's my problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn,
label {
display: none;
}
#media(min-width: 600px) {
label {}
.nav-links a {
color: white;
}
.nav-links {
float: right;
justify-content: space-between;
}
.nav-links a:hover {
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
.title,
.nav-links {
display: inline;
}
}
#media(max-width: 599px) {
.nav-links {
background-color: black;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra {
display: none;
}
.nav-links {
text-align: center;
display: block;
}
.nav-links a {
display: block;
transition: .9s;
}
nav {
padding-right: 0px;
}
.nav-links a:hover,
.active {
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links {
position: fixed;
right: -100%;
}
#nav-btn:checked~.nav-links {
right: 0;
width: 100% !important;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
If I understand correctly, you need to put the transition on the nav links container, not the links. That's where the open/close happens.
I've also moved your width rule to the container for all states, not just when it's shown. That fixes the close transition.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn,
label {
display: none;
}
#media(max-width: 9599px) {
.nav-links {
background-color: black;
transition: .9s;
text-align: center;
display: block;
width: 100%;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra {
display: none;
}
.nav-links a {
display: block;
}
nav {
padding-right: 0px;
}
.nav-links a:hover,
.active {
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links {
position: fixed;
right: -100%;
}
#nav-btn:checked~.nav-links {
right: 0;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
Description: I have a responsive navbar which is opening and closing perfectly fine.
Problem: When I click on a link, It doesn't close itself. I have to manually close it.
Kindly find the codebase below:
navbar.component.html
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<div class="header header-fixed">
<div class="navbar container">
<div class="logo">
<div class="logo">REYA</div>
</div>
<input type="checkbox" id="navbar-toggle">
<label for="navbar-toggle"><i></i></label>
<nav class="menu">
<ul>
<li><a (click)="goToHome('home')">Home</a></li>
<li><a (click)="goToBlogs('more-blogs')">Blogs</a></li>
<li><a (click)="goToServices('services')">Services</a></li>
<li><a (click)="goToContact('contact')">Contact</a></li>
<li><a>Login</a></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</div>
</div>
<router-outlet></router-outlet>
navbar.component.css
body {
margin: 0;
}
.header-fixed {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #242424;
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
line-height: 60px;
}
.navbar .logo {
height: 80px;
}
.navbar .logo:hover {
color: #777777;
}
.navbar nav {
flex: 8;
}
.navbar label {
user-select: none;
cursor: pointer;
padding: 28px 20px;
position: relative;
z-index: 3;
}
.navbar label i {
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
font-style: normal;
font-weight: normal;
}
.navbar label i:before,
.navbar label i:after {
content: '';
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.navbar label i,
.navbar label i:before,
.navbar label i:after {
display: block;
background: #eee;
}
.navbar label i:before {
top: 5px;
}
.navbar label i:after {
top: -5px;
}
.navbar #navbar-toggle {
display: none;
}
.header #navbar-toggle:checked~.menu {
visibility: visible;
opacity: 0.99;
}
.header #navbar-toggle:checked~label {
background: #212121;
border-radius: 50%;
}
.header #navbar-toggle:checked~label i {
background: transparent;
}
.header #navbar-toggle:checked~label i:before {
transform: rotate(-45deg);
}
.header #navbar-toggle:checked~label i:after {
transform: rotate(45deg);
}
.header #navbar-toggle:checked~label:not(.steps) i:before,
.header #navbar-toggle:checked~label:not(.steps) i:after {
top: 0;
}
#media (max-width: 768px) {
.navbar nav {
visibility: hidden;
opacity: 0;
z-index: 2;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all 0.3s ease-out;
display: table;
background: #ddd;
}
.navbar nav ul {
margin: 0;
padding: 20px 0;
display: table-cell;
vertical-align: middle;
}
.navbar nav li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
.navbar nav li:hover {
background: #525151;
}
.navbar nav li:hover a {
color: #fff;
transition: all 0.3s ease-out;
}
.navbar nav li a {
color: #212121;
}
}
#media (min-width: 768px) {
.navbar nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
text-align: center;
list-style: none;
}
.navbar nav li {
flex: 1;
}
.navbar nav li a {
display: block;
padding: 0 8px;
font-size: 16px;
line-height: 60px;
color: #fff;
text-decoration: none;
}
.navbar nav li.active {
background: #555;
}
.navbar nav li:hover {
background: #333;
}
.navbar label {
display: none;
}
}
.navbar .logo {
flex: 3;
}
.navbar .logo a {
display: block;
font-size: 30px;
font-weight: bold;
color: #fff;
text-decoration: none;
margin-left: 20px;
margin-top: 10px;
}
.navbar .logo a:hover {
color: #4d4c4c;
transition: .2s;
}
I have tried many options including:
Commenting out most of the lines
Removing the media queries
Removing the click event
Nothing is working! Can somebody please help me?
I'm not sure how you implemented your JS functions, but I think I would simulate a click on the navbar toggler or just make a function called whenever the user navigates, that makes sure the navbar is closed after navigation.
I want to create a sliding sidebar menu but it seems not to be working. I want it to slide when I click on the icon. I used css and checkbox to make enable this code but it seems not to be working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SideBar</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://kit.fontawesome.com/5e85fec85e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="banner">
<div id="header">
<h1>LOGO</h1>
</div>
<div id="menu">
<input type="checkbox" id="check">
<label for="check" class="show-menu-btn">
<i class="fa fa-bars"></i>
</label>
<ul class="dropdown">
<li>Home</li>
<li><>About</li>
<li>Contact</li>
<label for="check" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
</nav>
This is the css code. I want to create a sliding sidebar menu but it seems not to be working. I want it to slide when I click on the icon. I used css and checkbox to make enable this code but it seems not to be working.
#import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
* {
margin: 0;
padding: 0;
}
.banner {
background: #475050;
border-bottom: 2px solid black;
display: flex;
color: white;
line-height: 0.7;
}
#header {
padding: 15px 0 0 10px;
font-family: fantasy;
letter-spacing: 2px;
}
#menu {
margin-left: auto;
padding-right: 10px;
}
#menu ul {
display: flex;
}
#menu ul li {
list-style: none;
padding: 20px 10px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#menu ul li a {
text-decoration: none;
color: white;
cursor: pointer;
}
#menu ul li a:hover {
color: crimson;
}
#menu i, #check {
display: none;
}
#media (max-width: 486px) {
.banner {
display: block;
}
#header {
padding-bottom: 10px;
border-bottom: 2px solid black;
}
#header h1{
margin: 0;
font-size: 1.5rem;
line-height: normal;
font-weight: 700;
}
#menu {
width: 100%;
background-color: #475050;
}
#menu i {
display: block;
}
#menu ul {
display: block;
text-align: center;
padding: 15px 0;
width: 50%;
position: fixed;
height: 20%;
background: #475050;
right: -50%;
line-height: normal;
transition: 1.7s;
}
#menu ul li {
padding: 0;
padding-top: 5px;
}
#menu ul li a {
color: white;
text-decoration: none;
padding: 0;
width: 100%;
height: 100%;
}
#menu-hide {
display: none;
}
#menu-show {
display: block;
}
.show-menu-btn {
height: 24px;
width: 25px;
background-color: yellow;
text-align: center;
border-radius: 4px;
margin-top: -38px;
margin-left: 90%;
cursor: pointer;
transition: left 0.4s ease;
position: absolute;
color: black;
float: right;
}
.show-menu-btn,
.hide-menu-btn {
display: block;
}
.show-menu-btn,
.hide-menu-btn {
transition: 0.4s;
font-size: 1.2rem;
cursor: pointer;
}
.hide-menu-btn i,
.show-menu-btn i {
padding-top: 2px;
}
.hide-menu-btn {
position: relative;
float: right;
margin-top: -35%;
height: 24px;
width: 25px;
background-color: black;
text-align: center;
border-radius: 4px;
color: white;
}
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: crimson;
}
#menu i,
#check {
display: block;
}
#check {
position: absolute;
visibility: hidden;
z-index: 1111;
}
#check:checked ~ #menu ul{
right: 0%;
}
This is happening because you can't go back to parent elements once you are inside their children elements. So instead of
#check:checked ~ #menu ul{
right: 0%;
}
remove #menu because you are already inside #menu element, instead use this:
#check:checked ~ ul{
right: 0%;
}
Here is the working fiddle: https://jsfiddle.net/q9vsry40/2/