I've been looking at my CSS too long and need another set of eyes. I'm having trouble with a couple things. First: I can't figure out why my links are jumping on hover. It's supposed to be a mobile responsive hamburger to horizontal nav bar but I'm fairly new to this and have played around with too many parts of the code to know what I'm doing or not doing. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>
go to line 237 and change this:
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
to this
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 0em;
padding-left: 0em;
}
Related
I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.
This is the Javascript that I've tried but have not been able to get working properly:
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward"){
$('checkbox').removeAttribute('checked');
}
If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
$('checkbox').removeAttribute('checked');
}
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media (max-width: 1130px)and (min-width: 280px) {
.responsive-image-container {
display: flex;
flex-direction: column;
text-align: center;
}
img {
width: 85%;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>
I have this navbar but when it opens to show the content, I want it to open smoothly (With Transition) but it won't work.
Here is the example:
/* Google Fonts Import Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: #11101d;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.close{
width: 78px;
}
.sidebar .logo-details{
height: 60px;
width: 100%;
display: flex;
align-items: center;
}
.sidebar .logo-details i{
font-size: 30px;
color: #fff;
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
}
.sidebar .logo-details .logo_name{
font-size: 22px;
color: #fff;
font-weight: 600;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name{
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links{
height: 100%;
padding: 30px 0 150px 0;
overflow: auto;
}
.sidebar.close .nav-links{
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
display: none;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
background: #1d1b31;
}
.sidebar .nav-links li .iocn-link{
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
display: block
}
.sidebar .nav-links li i{
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow{
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
display: none;
}
.sidebar .nav-links li a{
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .nav-links li a .link_name{
font-size: 18px;
font-weight: 400;
color: #fff;
transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: #1d1b31;
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
transition: .5s;
}
.sidebar .nav-links li .sub-menu a{
color: #fff;
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank{
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details{
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: #1d1b31;
padding: 12px 0;
transition: all 0.5s ease;
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.sidebar .profile-details .profile-content{
display: flex;
align-items: center;
}
.sidebar .profile-details img{
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: #1d1b31;
transition: all 0.5s ease;
}
.sidebar.close .profile-details img{
padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
color: #fff;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.sidebar .profile-details .job{
font-size: 12px;
}
.home-section{
position: relative;
background: #E4E9F7;
height: 100vh;
left: 260px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
left: 78px;
width: calc(100% - 78px);
}
.home-section .home-content{
height: 60px;
display: flex;
align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
color: #11101d;
font-size: 35px;
}
.home-section .home-content .bx-menu{
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
body {
width: 100%;
margin: 0;
background-color: rgb(221, 221, 221);
}
.nav {
width: 100%;
background-color: rgb(0 88 114);
text-align: center;
padding-bottom: 5px;
}
h1 {
margin: 0 auto;
color:white;
font-family: Tahoma;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" type="text/css" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Codify.net</title>
</head>
<body>
<header>
<div class="nav">
</div>
<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-html5'></i>
<span class="logo_name">Learn HTML5</span>
</div>
<ul class="nav-links">
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-chevron-right-circle' ></i>
<span class="link_name">Let's Start!</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Let's Start!</a></li>
<li>Set-up Environment</li>
<li>How HTML Works</li>
<li>HTML Structure</li>
</ul>
</li>
</div>
<script>let arrow = document.querySelectorAll(".arrow");for (var i = 0; i < arrow.length; i++) {arrow[i].addEventListener("click", (e)=>{let arrowParent = e.target.parentElement.parentElement;arrowParent.classList.toggle("showMenu");});};</script>
</header>
</body>
</html>
As you can see it looks and functions fine but then it needs a smooth transition once the arrow is clicked.
I tried the simple transition: 0.5s; but it does not seem to work.
I was hoping someone could help me out or spot my mistake.
I have made this navigation, everything works well. However, while I was testing I realised that if you hover on the first nav and scroll down, you will see that the submenu is coming with the mouse as well. How can I avoid it?
Note: Run it in full (desktop) screen size.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind("click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom {
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo {
float: left;
}
.logo img {
width: 290px;
}
.custom-navi {
margin: 0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.topnav .icon {
display: none;
padding-top: 5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color: white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi {
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display: none;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight: normal;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display: block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity: 0;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a,
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img {
padding-left: 11px;
}
.custom-navi {
margin: 0;
padding: 0px;
}
.topnav.responsive {
position: relative;
width: 100%;
margin-top: 15px;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
padding-left: 10px;
padding-top: 0px;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active {
color: #002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main {
background-color: #eee;
width: 100vw;
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>
Use position: absolute instead of position: fixed:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind("click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom {
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo {
float: left;
}
.logo img {
width: 290px;
}
.custom-navi {
margin: 0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.topnav .icon {
display: none;
padding-top: 5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color: white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi {
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display: none;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight: normal;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display: block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a,
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img {
padding-left: 11px;
}
.custom-navi {
margin: 0;
padding: 0px;
}
.topnav.responsive {
position: relative;
width: 100%;
margin-top: 15px;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
padding-left: 10px;
padding-top: 0px;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active {
color: #002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main {
background-color: #eee;
width: 100vw;
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>
don't use position fixed if you dont want the element to stick to screen. use relative.
#media screen and (min-width: 1150px)
.dropdown-content {
visibility: hidden;
opacity: 0;
position: relative;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind( "click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom{
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo{
float:left;
}
.logo img{
width:290px;
}
.custom-navi{
margin:0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight:bold;
}
.topnav .icon {
display: none;
padding-top:5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color:white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi{
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display:none;
position: relative;
min-width: 160px;
padding-top:18px;
padding-bottom: 18px;
z-index:999;
background-color:white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight:normal;
}
.topnav a:hover, .dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display:block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity:0;
position: relative;
min-width: 160px;
padding-top:18px;
padding-bottom: 18px;
z-index:999;
background-color:white;
}
.dropdown:hover .dropdown-content {
visibility:visible;
opacity:1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img{
padding-left:11px;
}
.custom-navi{
margin:0;
padding: 0px;
}
.topnav.responsive {position: relative; width:100%; margin-top:15px;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;padding-left:10px;padding-top:0px;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active{
color:#002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main{background-color:#eee;
width:100vw;
height:100vh;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a >Contact persons</a>
<a >Contact persons</a>
<a >Contact persons</a>
<a >Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div></a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>
I have coded for underline on hover on the navigation menu, which works well. But when I create a responsive navigation menu, the underline on hover covers the entire width of the block rather than the navigation link, as it does when the browser is greater than 600px.
Here's the site, or you can refer to the below snippet.
Any help is appreciated.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>
I was checking your CSS and the problem is that a tag has the property of display:block which expand the tag, so, the styles applies to the tag itself, no in the text, so, if you want to preserve the space when the display is smaller, you should wrap each a tag in a list item or in a div, and pass it the property of display:block
this is the example using that I said
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
margin: 0;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar li{
list-style:none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a{
display: none;
padding-top: 6px;
}
.navbar .icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive li a {
float;
none;
display: inline;
text-align: center;
margin: 4px;
}
.navbar.responsive li {
float;
none;
text-align: center;
margin: 6px 00px;
}
.navbar.responsive {
align-content: center;
flex-flow:column;
}
.navbar.responsive li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
<ul class="navbar" id="myNavbar">
i
<li>About</li>
<li>Lindsay</li>
<li>Branding</li>
<li>Photography</li>
<li>Instagram</li>
</ul>
Are you expecting like this
Temporary Solution
I have just added nth-child and given scaling for each link.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
height: 2px;
width:100%;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:nth-child(1):before {
visibility: visible;
-webkit-transform: scaleX(.18);
transform: scaleX(.18);
}
.navbar.responsive a:hover:nth-child(2):before {
visibility: visible;
-webkit-transform: scaleX(.22);
transform: scaleX(.22);
}
.navbar.responsive a:hover:nth-child(3):before {
visibility: visible;
-webkit-transform: scaleX(.25);
transform: scaleX(.25);
}
.navbar.responsive a:hover:nth-child(4):before {
visibility: visible;
-webkit-transform: scaleX(.33);
transform: scaleX(.33);
}
.navbar.responsive a:hover:nth-child(5):before {
visibility: visible;
-webkit-transform: scaleX(.26);
transform: scaleX(.26);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>
how can I close my hamburger menu when clicking on link, I need it for one page navigation. Menu works fine but just need a way to close it.
I have very little knowledge about JS.
I have this in HTML and CSS, don't have any JS:
HTML in index.html file
<nav>
<div id="menuToggle">
<input type="checkbox"/>
<span></span>
<span></span>
<span></span>
<ul id="menu" class="navbar-collapse">
<li>idi na 1</li>
<li>idi na 2</li>
<li>idi na 3</li>
</ul>
</div>
</nav>
CSS in style.css file
*{
margin:0;
padding:0;
}
nav{
position:fixed;
z-index: 99999;
}
a{
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #000000;
transition: color 0.3s ease;
}
a:hover{
color: #999999;
}
#menuToggle{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000000;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2){
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #000000;
}
#menuToggle input:checked ~ span:nth-last-child(3){
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2){
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu{
background-size:cover;
background-repeat:no-repeat;
position: absolute;
width: 100vw;
height:100vh;
margin: -77px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: rgba(255,255,255,1);
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li{
padding: 10px 0;
font-size: 60px;
text-align: center;
}
#menuToggle input:checked ~ ul{
transform: scale(1.0, 1.0);
opacity: 1;
}
#media only screen and (max-width:480px) {
#menuToggle input {
top: 2px;
left: -5px;
}
}
Thank you very much for any help you can provide!
Use trigger .
$('#menu > li > a').on('click', function() {
$("#menuToggle").find('input').trigger("click");
});
*{
margin:0;
padding:0;
}
nav{
position:fixed;
z-index: 99999;
}
a{
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #000000;
transition: color 0.3s ease;
}
a:hover{
color: #999999;
}
#menuToggle{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000000;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2){
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #000000;
}
#menuToggle input:checked ~ span:nth-last-child(3){
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2){
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu{
background-size:cover;
background-repeat:no-repeat;
position: absolute;
width: 100vw;
height:100vh;
margin: -77px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: rgba(255,255,255,1);
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li{
padding: 10px 0;
font-size: 60px;
text-align: center;
}
#menuToggle input:checked ~ ul{
transform: scale(1.0, 1.0);
opacity: 1;
}
#media only screen and (max-width:480px) {
#menuToggle input {
top: 2px;
left: -5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu" class="navbar-collapse">
<li>idi na 1</li>
<li>idi na 2</li>
<li>idi na 3</li>
</ul>
</div>
Note: Don't forget to put your js code inside document.ready.
$(function() {
$('#menu > li > a').on('click', function() {
$("#menuToggle").find('input').trigger("click");
});
});