Scenario
I have a mobile menu that shows when the window is below 736px. There is a javascript toggle on this menu that adds and removes a CSS class that shows the mobile menu ul (and of course the child li items).
When you re-size the window the CSS media query swaps out the desktop menu for the separate mobile menu and the toggle works as planned.
Problem
When I re-size the window and then open and close the mobile menu it all works fine, when the window is then subsequently re-sized again after this, the mobile ul and li flash up for a second when the window hits the CSS media query break point again (736px).
I don't know how to stop this happening, it really is sending me totally around the bend and I seem to have spent hours on this and I'm getting nowhere.
If anyone can help me on this I would be so grateful.
P.S I don't mind the fact the mobile menu is still there after re-sizing if the mobile menu was left open - this is intended behaviour. It's when the mobile menu is closed and the window is resized to desktop and then back to mobile again that the flash of the menu is happening.
codepen: https://codepen.io/emilychews/pen/aVYGPr
JS
var mobileMenuButton = document.getElementById("mobile-menu-button")
var mobileMenuItems = document.getElementById("mobile-nav-menu-items")
// TOGGLE MOBILE MENU
var mobileMenu = false
function toggleMobileMenu() {
if (mobileMenu === false) {
mobileMenuItems.classList.remove("mobileMenuInactive")
mobileMenuItems.classList.add("mobileMenuActive")
mobileMenuButton.innerHTML = "Close"
mobileMenu = true
} else {
mobileMenuItems.classList.add("mobileMenuInactive")
mobileMenuItems.classList.remove("mobileMenuActive")
mobileMenuButton.innerHTML = "Menu"
mobileMenu = false
}
}
mobileMenuButton.addEventListener("click", function() {
toggleMobileMenu()
}, false)
CSS
body, ul {padding: 0; margin: 0}
#main-header {width: 100%; height: 100px;}
/* desktop navigation */
#main-navigation {
position: relative;
width: 100%;
height: 100px;
background: red;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 10px 5% 10px 5%;
align-items: center;
}
#logo-holder {
width: 150px;
height: 66px;
background-color: grey;
}
ul#nav-menu-items {
display: flex;
margin-left: auto;
}
#main-navigation ul li {list-style-type: none;}
#main-navigation ul#nav-menu-items li a {
padding: 10px 15px;
margin: 0 5px;
box-sizing: border-box;
background: yellow;
text-decoration: none;
color:#000;
}
#main-navigation ul#nav-menu-items li a:hover {
color:blue;
transition: color .25s;
}
#mobile-menu-button, ul#mobile-nav-menu-items {
display: none;
}
/* --- MOBILE MENU AND DROPDOWN ---
Below is a separate menu added for mobiles.
*/
#media screen and (max-width : 736px) {
/* hides desktop menu */
ul#nav-menu-items {display: none}
#mobile-menu-button {
display: flex;
justify-content: center;
background: blue;
color: white;
padding: 10px 15px;
min-width: 75px;
cursor: pointer;}
ul#mobile-nav-menu-items {
opacity: 0;
transform: scaleY(0);
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 150px;
background: blue;
position: absolute;
right: 5%;
top: 100px;
padding: 10px 0px;
}
ul#mobile-nav-menu-items li {
padding: 10px 10px;
}
ul#mobile-nav-menu-items li a {
padding: 10px 15px;
color: white;
text-decoration: none;
transition: color .3s;
}
ul#mobile-nav-menu-items li a:hover {
color: lightblue;
}
/* -------- MOBILE CLASSES ADDED WITH JavaScript*/
#mobile-nav-menu-items.mobileMenuActive {
animation: showMobileMenu .5s ease-in forwards;
}
#keyframes showMobileMenu {
0% {opacity: 0;transform: scaleY(0);}
1% {opacity: 0; transform: scaleY(1);}
100% {opacity: 1; transform: scaleY(1);}
}
#mobile-nav-menu-items.mobileMenuInactive {
animation: removeMobileMenu .5s ease-out forwards;
}
#keyframes removeMobileMenu {
0% {opacity: 1; transform: scaleY(1);}
99% {opacity: 0; transform: scaleY(1);}
100% {opacity: 0; transform: scaleY(0);}
}
} /*END OF MOBILE MENU STYLING*/
HTML
<header id="main-header">
<!-- desktop nav -->
<nav id="main-navigation">
<div id="logo-holder"></div>
<ul id="nav-menu-items">
<li class="menu-item menu-item-1">News</li>
<li class="menu-item menu-item-2">About</li>
<li class="menu-item menu-item-3">Contact</li>
</ul>
<!-- mobile nav -->
<ul id="mobile-nav-menu-items">
<li class="mobile-menu-item mobile-menu-item-1">News</li>
<li class="mobile-menu-item mobile-menu-item-2">About</li>
<li class="mobile-menu-item mobile-menu-item-3">Contact</li>
</ul>
<!-- button for triggering mobile nav -->
<div id="mobile-menu-button">Menu</div>
</nav>
</header>
I have just removed the code below and it worked, maybe because you are manipulating the same event in your CSS and JS file.
#keyframes removeMobileMenu {
0% {opacity: 1; transform: scaleY(1);}
99% {opacity: 0; transform: scaleY(1);}
100% {opacity: 0; transform: scaleY(0);}
}
I realize this is a rather old question, but since there wasn't a great answer here I thought I'd add one for others searching.
I recently came across this exact same issue and ended up figuring out a pretty good solution to it. I documented it all at https://stevenwoodson.com/blog/solving-animation-layout-flickering-caused-by-css-transitions/ if you're still in need of a fix!
The gist is that the transition needs to be added separately in a different class so you can remove it when you're not actively opening or closing the menu.
Related
I am a beginner in web design and development and I am trying to make the navigation bar be more responsive when it is viewed on phones and tablets but for some reason it appears really buggy on the phone, I have used a meta tag so that the browser renders it correctly but it doesn't, it comes out all buggy like the picture below:
Click on the link to see picture -> As you can see it's coming out half and half
I have enabled overflow-x:hidden but some how am still able to browse towards the right and see the nav bar which isn't meant to be visible unless clicked, I don't understand why that's happening.
Click on the link to see picture -> This is how it is when you load it.
I have also tried to put the screen resolution as follows:
`#media screen and (max-width:1024px){
.nav-links
{
width:48%;
}
}
#media screen and (max-width:768px)`
This is also running on my firebase server and is available to view through this link:https://test-response-5f60c.web.app/PAGES/quotes.html
I am sorry for any code inconsistencies and mistakes, please help me out, I don't understand what I am doing wrong in the CSS. This is the tutorial I followed: Click on the link -> Tutorial
Following is my code:
function navSlide() {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
//Toggle Nav
nav.classList.toggle("nav-active");
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ""
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #000000;
color: #f9f9f9;
font-family: 'Open Sans', sans-serif;
font-size: large;
}
.logo{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
}
.nav-links {
list-style-type: none;
padding: 1.2%;
margin:0;
overflow: hidden;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.nav-links li a {
font-size: 18px;
font-weight: bold;
display: inline-block;
color: white;
text-align: center;
padding: 26px 26px;
text-decoration: none;
transition: 0.3s;
}
li a:hover {
background-color: #3498DB ;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: #f9f9f9;
margin: 5px;
}
.head {
font-family: sans-serif;
font-weight: bold;
margin: auto;
width: 60%;
border: 3px solid #3498DB ;
padding: 40px;
text-align: center;
opacity: 5.9;
animation-duration: 3s;
animation-name: fadein;
}
#media screen and (max-width:1024px){
.nav-links{
width:48%;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden !important;
}
.nav-links{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #000000;
display: flex;
flex-direction: column;
align-items:center;
width: 50%;
transform: translate(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.nav-active {
transform: translate(0%);
}
}
#keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
#googleForm {
margin-left: 20px;
text-align: center;
margin-top: 20px;
}
<!doctype html>
<html>
<head>
<style>
body {
background-image: url('../IMG/land2.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: auto ;
}
</style>
<title> Quotes </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<h4> Edge Concreting and Landscaping </h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Quotes</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div id="googleForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5uy_5vc6ozsY1kcGRliC8hYH9w_WqEU1acN0tJQ6rrqEJmg/viewform?embedded=true" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<script src="../JS/app.js"></script>
</body>
</html>
Set your media queries to a lower max width and position absolute.
For example.
#media (max-width: 768px){.logo h4 {position: absolute;
right: 50px;}}
That should enable you to select your logo and adjust it for mobile device.
#media (max-width: 768px){.nav-links{position: absolute;
right: 50px;}}
Should enable you to select and adjust your dropdown. You can change or substitute rightor left or top or bottom or width within the same media query.
Try reducing the width of nav-links.
This worked for me:
html, body {
overflow-x: hidden;
}
body {
position: relative;
}
I want to program a responsive navigation bar, so when the user clicks on the burger menu, the links of the navigation should move from right to left inside the website.
In Javascript, I toggle the class "nav-active" of "nav ul". The "nav-active" class has the attribute "transform: translateX(0%);", which should position the element back to the website, but it doesn't.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<!------------------------------------------------------------------------Top Navigation-->
<nav class="navigation">
<div class="logo">
<img src="images/logodressler350.png" alt="Logo Image" width="250">
</div>
<ul class="nav-links">
<li>Startseite</li>
<li>lernraumdressler</li>
<li>Nachhilfe</li>
<li>Anfahrt</li>
<li>Kontakt</li>
</ul>
<div class="burger">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</nav>
<div class="green-line"></div>
<script type="text/javascript" src="javascripts/navbar.js"></script>
</body>
</html>
SCSS:
.navigation{
display: flex;
min-height: 8vh;
justify-content: space-around;
align-items: center;
background-color: white;
ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 70%;
}
ul li{
list-style: none;
text-align: center;
}
ul li a{
text-decoration: none;
color: #333;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
}
}
.dropdowncontent{
display: none;
}
.burger{
display: none;
cursor: pointer;
div{
width: 25px;
height: 3px;
background-color: #333;
margin: 5px;
transition: all 0.3s ease;
}
}
.green-line{
background-color: lightgreen;
width: 100%;
height: 2px;
}
//------------------------------------------------------------------------------MEDIA
#media screen and (max-width: 968px){
.navigation{
ul{
width: 80%;
}
}
}
#media screen and (max-width: 868px){
body{
//overflow-x: hidden;
}
.burger{
display: block;
}
.navigation ul{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: gray;
display: flex;
flex-direction: column; // x und y werden getauscht
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
li{
opacity: 0;
}
}
}
//------------------------------------------------------------------------------Keyframes
/*wenn man clickt*/
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line-1{
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line-2{
opacity: 0;
}
.toggle .line-3{
transform: rotate(45deg) translate(-5px, -6px);
}
JS:
const navSlide = () => {
const burger = document.querySelector(".burger");
var nav = document.querySelector(".navigation ul");
const navLinks = document.querySelectorAll(".navigation ul li");
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
// Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation){
link.style.animation = "";
} else{
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7}s`;
}
});
// Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
Here is the Demo
https://jsfiddle.net/chinamarc/6r78a0e2/4/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
//-----------------------------------------------Keyframes
/*wenn man clickt*/
.navigation .nav-active{
transform: translateX(0%);
}
I'm trying to change the color of a hamburger menu in a sticky nav for a responsive website.
At the moment, the nav bar and menus are styled and toggled with css and js.
Everything thing works fine, but recently i've had to make some changes and have run into this problem.
This is how it works;
- the nav bar sticks to the top of the screen and changes color on scroll.
- On narrow width screens, some js hides the menu text links and toggles a hamburger menu.
- on clicking the hamburger menu, an overlay menu is toggled
The problem i'm having is I've changed the background color of the sticky menu bar on scroll - but I can't see how to change the color of the hamburger icon on scroll.
here's what I have...
<!-- Script Sticky Menu -->
<script type="text/javascript">
window.addEventListener("scroll", function(){
if(window.pageYOffset > 50){
document.getElementById("main-nav").className = "scrolling";
} else {
document.getElementById("main-nav").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("nav-page-section").className = "scrolling";
} else {
document.getElementById("nav-page-section").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("vb-logo-mobile").className = "scrolling";
} else {
document.getElementById("vb-logo-mobile").className = "";
}
})
</script>
Inside "nav-page-section" is a container for the hamburger button...
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
This css styles the button_container...
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
Initially, i added an additional line to the script...
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container").className = "scrolling";
} else {
document.getElementsByClassName("button_container").className = "";
}
And added this css styling...
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
But that hasn't worked. I searched around for a way to target a specific tag ('span') within a classname ('button_container') but didn't find anything.
I keep looking at the span tag and thinking that's what's tripping me up - but i've tried many different variations of the script and nothing seems to work. When i add [0] after the classname - ('button_container')[0] - the hamburger menu disappears.
Anyone have any ideas?
Thanks.
Here is the full CSS and HTML...
/* 7. Main Menu - Hamburger */
/* icon+overlay */
.overlay-menu ul li a {
display: inline-block;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 20px;
font-family: 'HurmeGeometricSans1';
font-weight: 200;
overflow: hidden;
top: 5px;
}
.overlay-menu ul li a:after {
content: '';
position: absolute;
background: #E4002B;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.overlay-menu ul li a:hover:after, .overlay-menu ul li a:focus:after, .overlay-menu ul li a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 18px;
right: 18px;
height: 26px;
width: 30px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
<!-- start Hamburger Menu & Overlay Menu -->
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>V:WEAR</li>
<li>V:GEAR</li>
<li>V:MECHS</li>
<li>V:RDAS</li>
<li>V:LIQUID</li>
</ul>
</nav>
</div>
<!-- end Hamburger Menu & Overlay Menu -->
As far as I understand the spans in the button_container are the bars of the hamburger menu. So, to change color on scroll, I would say:
.scrolling .button_container span {
background-color: red;
}
Replace red with the preferred color.
document.getElementsByClassName("button_container").className
won't work since
document.getElementsByClassName("button_container")
is an array, and you have to iterate the array and assign to element you want.
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container")[0].className = "scrolling";
} else {
document.getElementsByClassName("button_container")[0].className = "";
}
I want my i elements to lose the outline class on hover, but for some reason this is not working. The class is lost and added again instantly without a fade/delay. If I try this exact same code with a class of background then it does work. What am I not seeing here?
The second problem is that when I do try this with a background class, the background stays there for the duration of the fade (in this case 500ms) and then disappears instantly. This should also be a fade, like a fade out.
Thank you!
JSFiddle
$('nav a').hover(function(){
if (!$(this).find("i").hasClass("home")){
$(this).find('i').toggleClass('outline', 500);
}
})
.hover() can be passed 2 functions as arguments. The first is like .mouseover() and the second is the .mouseout()
$('nav a').hover(function() {
$(this).find('.home').removeClass('outline');
}, function() {
$('.home').addClass('outline');
})
Update
You can add fadein and fadeout effect without Javascript, only with css:
nav {
font-size: 20 px;
}
nav a {
padding-left: 30 px;
}
nav a i {
position: absolute;
left: 0;
}
nav a i.star: not(.outline) {
opacity: 0;
transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
opacity: 1;
transition: opacity 300 ms ease;
}
Demo here.
With the help of [Radonirina Maminiaina][1]'s answer and some altering of the code by myself I made it work exactly as intended.
It was Radonirina's idea to put the second icon right behind the original icon by using position: absolute; (see his code above), but then I came up with the idea to add the class "dark" to the hidden icon underneath and simply select it to make the opacity 0, and 1 on hover, including the transition effect. This made the CSS a lot simpler and it works beautifully.
Thanks again!
Here is a working example of the end result:
$('.menu-toggle').click(function() {
$('nav').toggleClass('nav-open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */
header {
position: fixed;
height: 50px;
width: 100%;
background: #666666;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
color: #222;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
font-family: Fjalla One;
}
.smallNav {
position: absolute;
top: 100%;
right: 0;
background: #CCCCCC;
height: 0px;
overflow: hidden;
}
.nav-open {
height: auto;
}
.smallNav a {
color: #444;
display: block;
padding: 1.5em 4em 1.5em 3em;
border-bottom: 1px solid #BCBCBC;
}
.smallNav a:last-child {
border-bottom: none;
}
.smallNav a:hover,
.smallNav a:focus {
color: #222;
background: #BABABA;
}
/* Menu toggle */
.menu-toggle {
padding: 1em;
position: absolute;
right: 1em;
top: 0.75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: white;
height: 3px;
width: 1.5em;
border-radius: 3px;
}
.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);
}
.menu-toggle:hover {
transform: scale(1.1);
}
i.icon {
margin-right: 0.5em !important;
font-size: 1.2em !important;
}
/* Change icons on hover */
nav a i.dark {
position: absolute;
left: 42px;
}
nav a i.dark {
opacity: 0;
transition: opacity .25s ease;
}
nav a:hover i.dark {
opacity: 1;
transition: opacity .25s ease;
}
nav a:hover i.outline {
opacity: 0;
transition: opacity .25s ease;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<header>
<div class="header-container">
<nav class="smallNav">
<ul>
<li><i class="icon home"></i>Home</li>
<li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li>
<li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li>
<li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li>
<li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger">
</div>
</div>
</div>
</header>
I have got one small hope obstacle.
When I click on the menu button it doesn't show the navigation (nav), but ONLY in Safari browser. In all browsers this code working properly. It is so tricky grrrr.
Here is the code:
HTML
<nav>...</nav>
jQuery:
$('#menu-open').click(function () {
$(this).toggleClass('open');
$('.main-rhomboid').toggleClass('hide');
$('nav').toggleClass('visible');
$('body').toggleClass('overflow');
});
Css:
.visible{
display: block;
opacity: 1;}
nav{position: absolute;
z-index: 102;
width: 100%;
height: 100vh;
opacity: 0;
transition: opacity 4s;
background-color: $accent-blue;
display: none;
border: 10px solid $accent-yellow;
box-sizing: border-box;}