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>
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 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">
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/
I have a problem with the burgermenu one of the options needs to have a dropdown, but the content doesn't respond accordingly.
The dropdown needs to push the other content down, but right now it just overlaps.
I have added the code for the menubar/burgermenu be low
Hope you can help me, thanks.
https://codepen.io/SofieH/pen/ZvveNK
header {
background: #e7e7e8;
color: #EBEBD3;
padding: 0.5em 0;
position: relative;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: right;
font-size: 1rem;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
top: 100%;
background: #464655;
clip-path: circle(0px at top left);
transition: clip-path ease-in-out 700ms;
/* display: none; */
}
.site-nav--open {
clip-path: circle(250% at top left);
/* display: block; */
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #EBEBD3;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #E4B363;
color: #464655;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 1.1em;
text-align: right;
color: rgba(255, 255, 255, .4);
}
.menu-toggle {
position: absolute;
padding: 15px;
float: left;
top: 5px;
cursor: pointer;
}
.menu-toggle:hover {
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #636363;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-treatment {
display: none;
background-color: #464655;
position: absolute;
z-index: 1;
/*min-width: 160px;*/
height: 400px;
}
.dropdown-treatment a {
padding: 2em 4em 2em 1.5em;
}
.dropdown:hover .dropdown-treatment {
display: block;
margin-left: 100px;
}
nav ul div div:hover .dropdown-other {
margin-top: 300px;
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
clip-path: initial;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 3em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
}
<header>
<div class="container">
<!--<h1 class="logo"><span>Logo</span></h1>-->
<h1 class="logo">Godfornuft</h1>
<nav class="site-nav">
<ul>
<li>Forside</li>
<div class="dropdown">
<li>Behandlinger</li>
<div class="dropdown-treatment drophover">
<li>
Zoneterapi</li>
<li>
Tankefeltterapi</li>
<li>
Babyzoneterapi</li>
</div>
</div>
<div class="dropdown-other">
<li>Priser</li>
<li>Om Godfornuft</li>
<li>Kontakt</li>
</div>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<div class="col XS-12 logotop">
<img src="http://via.placeholder.com/200x30" alt="">
</div>
</header>
Try removing the position absolute from .dropdown-treatment.
Please try to add only li tag as the direct child of ul
Read more about positioning here
A sample
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
});
body {
margin:0;
padding: 0;
width: 100%;
}
header {
background: #e7e7e8;
color: #EBEBD3;
padding: 0.5em 0;
position: relative;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: right;
font-size: 1rem;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
top: 100%;
background: #464655;
clip-path: circle(0px at top left);
transition: clip-path ease-in-out 700ms;
/* display: none; */
}
.site-nav--open {
clip-path: circle(250% at top left);
/* display: block; */
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #EBEBD3;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #E4B363;
color: #464655;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 1.1em;
text-align: right;
color: rgba(255,255,255,.4);
}
.menu-toggle {
position: absolute;
padding: 15px;
float: left;
top: 5px;
cursor: pointer;
}
.menu-toggle:hover {
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #636363;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-treatment {
display: none;
background-color: #464655;
/*background-color: #E4B363;*/
/*position: absolute;
z-index: -20;*/
/*min-width: 160px;*/
/* height: 400px;*/
}
.dropdown-treatment a {
// padding: 2em 4em 2em 1.5em;
}
.dropdown:hover .dropdown-treatment {
display: block;
margin-left: 100px;
}
nav ul div div:hover .dropdown-other {
margin-top: 300px;
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
clip-path: initial;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 3em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
.site-nav--icon {
display: none;
}
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Godfornuft.dk</title>
<link rel="stylesheet" href="css/skeleton_mobile.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/costume.css">
<!--https://codepen.io/anon/pen/YYxEej?editors=1010-->
</head>
<body>
<header class="">
<div class="container">
<!--<h1 class="logo"><span>Logo</span></h1>-->
<h1 class="logo">Godfornuft</h1>
<nav class="site-nav">
<ul>
<li>Forside</li>
<li class="dropdown">Behandlinger
<ul class="dropdown-treatment drophover">
<li>Zoneterapi</li>
<li>Tankefeltterapi</li>
<li>Babyzoneterapi</li>
</ul>
</li>
<li>Priser</li>
<li>Om Godfornuft</li>
<li>Kontakt</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<div class="col XS-12 logotop">
<img src="http://via.placeholder.com/200x30" alt="">
</div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src="js/navbar.js"></script>
</body>
</html>
I'm creating a website for myself and was following a tutorial by codecourse, when I was done I noticed that the buttons were unclickable as when you clicked, the dropdown menu would disappear. Please help? Thanks in advance.
Tutorial: https://www.youtube.com/watch?v=pYN8FUiKfzA
Code [HTML]: `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="img/cLogo.png" />
<link rel="spreadsheets" href="styles/css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/css/global.css">
</head>
<body>
<header>
<nav class="nav-main">
<div class="logo">iTzPvPLyfe</div>
Home
Apply
dropdown
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Skywars</li>
<li>Blitz SG</li>
</ul>
</div>
</div>
About
</nav>
</header>
<!-- -------------------------------------------------------------- -->
<section class="content">
<p>
Lorem Ipsum
</p>
</section>
<!-- -------------------------------------------------------------- -->
<footer>
</footer>
</body>
</html>
Code[SASS]:
.nav-main {
width: 100%;
background-color: $nav-background-color;
height: 70px;
color: $nav-foreground-color;
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
> ul {
#extend %plainlist;
float: left;
> li {
float: left;
}
}
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: $nav-foreground-color;
text-decoration: none;
&:hover {
background: $nav-hover-color;
}
}
.nav-drop {
&:focus {
background-color: $nav-hover-color;
~ .nav-content {
max-height: 400px;
#include transition(max-height, 0.4s, ease-in);
}
}
}
.nav-content {
margin-left: 345px;
position: absolute;
top: 70px;
overflow: hidden;
background-color: $nav-background-color;
max-height: 0;
a {
color: $nav-foreground-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.nav-sub {
padding: 20px;
ul {
#extend %plainlist;
a {
display: inline-block;
}
}
}
works for me. I don't think you included the mixins properly. Since you did not include them in the code snippet above, I went to the tutorial link and included them manually. Try checking to see if you have the mixins included in the sass file at the top like its shown in the tutorial. Make sure your filenames match, and your mixins match.
Your sass should convert to this css. Note, I adjusted the colors, and you should be able to take from here:
.nav-main {
width: 100%;
background-color: grey;
height: 70px;
color: white;
}
.nav-main .logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
.nav-main > ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: pink;
text-decoration: none;
}
.nav-item:hover {
background: orange;
}
.nav-drop:focus {
background-color: orange;
}
.nav-drop:focus ~ .nav-content {
max-height: 400px;
transition: max-height, 0.4s, ease-in;
}
.nav-content {
margin-left: 345px;
position: absolute;
top: 70px;
overflow: hidden;
background-color: orange;
max-height: 0;
}
.nav-content a {
color: blue;
text-decoration: none;
}
.nav-content a:hover {
text-decoration: underline;
}
.nav-sub {
padding: 20px;
}
.nav-sub ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-sub ul a {
display: inline-block;
}