Menu
I have just started to learn J-Query and I'm trying to implement a simple click event into my webpage, which is when you click a button it will open the mobile-nav.
This button works when I select the header for example it will hide the header but wont show the mobile-nav?
p.s I'm copying the DICE homepage just for learning purposes as I know I'm using copyrighted media ;).
I think it could be to do with that Im hiding the mobile-nav in my CSS so the J-query cant toogle/show it.
@media screen and (max-width: 1024px) {
nav{
justify-content: space-around;
}
.bars{
display:block;
width: 50px;
height: 100px;
cursor: pointer;
}
ul{
display: none !important;
}
.mobile-nav{
display: none;
position:absolute;
z-index: 3;
left:-110px;
top:70px;
width: 100%;
height: 100%;
opacity: 0.8;
background-color:black;
}
.mobile-nav li{
height: 50px;
}
.mobile-nav a{
font-size: 2rem;
font-weight: 700;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dice</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function(){
$('.bars').on('click',function(){
$('.mobile-nav').show();
});
}); //End of code?//
</script>
</head>
<body>
<header>
<nav>
<img src="dice-logotype-black.png">
<button class="bars">
<ul class="mobile-nav">
<li><a href="#">ABOUT</a></li>
<li><a href="#">GAMES</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">STORE</a></li>
</ul>
</button>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GAMES</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">STORE</a></li>
</ul></nav>
</header>
<div class="global-container">
<div class="video"><video src="dicemovie3-1.mp4" autoplay loop></video>
<div class="text"><h1>We share the passion to create something extraordinary.</h1>
<button>DISCOVER OUR CULTURE</button><button id="button-2">READ ABOUT OUR GAMES</button>
</div>
</div>
</div>
<div class="square-images">
<div class="square-1"></div>
<div class="square-2"></div>
<div class="square-3"></div>
</div>
<div class="about-dice-wrapper"><div><h2>MORE THAN COMPUTER SCREENS</h2>
<p>DICE is the award-winning developer of the Battlefield franchise and games like Mirror’s Edge.
We are situated in the world’s most picturesque cities, Stockholm,
Sweden and in the vibrant city of Los Angeles, USA.</p>
<button>About Dice</button></div></div>
<div class="tweet-wrapper"><div>
<img src="tweet.jpg-thumb">
<p>Meet DICE today! Head to Stockholm's Nationalmuseum at 18:00 & learn about character design: https://t.co/WGUbkFNjay https://t.co/0SrHr38HiH<br> @EA_DICE</p>
</div>
</div>
</body>
</html>Hopefully someone can give me some insight into this issue.
234
If the slide out menu of the theme is not working when on mobile. If your mobile menu on your free or premium theme is not working, it is most likely due to your site having a javascript error, this would usually be caused from a plugin you've installed.
If your main menu displays on desktop and laptop devices, but not on mobile devices, this may be due to not having a menu assigned to the main menu location. To solve this issue, you must ensure a menu is assigned. To learn more about this, please continue reading below.
Not beeing able to make Mega Menu work on mobile, already using WordPress Navigation Menu widget. If you go on desktop and click on “HOLA, IDENTIFÍCATE” you can see the mega menu its toggled. But If you go to mobile it is not toggled anywhere. Any clues on how to fix this? We’ve tried everything on this topic and nothing works. Please help.
If you are running any cache plugins on your website, make sure that you clear your cache as well as clearing your browser/device cache when checking on mobile. If you have purged your cache and ensured that the main menu is assigned in the WordPress menu section, then you need to check for 3rd party plugin conflicts.
1. Go back to “Mobile Panel” in menu skin to enable the plugin’s menu toggle. 2. Go to the “Nav Menu” widget and disable menu toggle of Elementor like this. 3. Go to “Advanced” tab of “Nav Menu” widget to edit menu toggle position as you like. Look like there’re no proper solutions for the problem.
The most simple (according to my knowledge) solution for animated mobile navigation:
$(document).ready(function(){
$('nav').hide();
$('.show_nav').click(function(){
$('nav').slideToggle('slow');
});
}); .show_nav {
padding: 1em 1.4em;
background: #ddd; }
nav {
background: #111; }
nav ul {
list-style: none;
padding: 0;
margin: 0; }
nav ul li {
color: #fff;
padding: 1em 1.4em; } <!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<link rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button class="show_nav">show nav</button>
<nav>
<ul>
<li>Hello world!</li>
<li>Hello world!</li>
<li>Hello world!</li>
<li>Hello world!</li>
<li>Hello world!</li>
<li>Hello world!</li>
<li>Hello world!</li>
</ul>
</nav>
</body>
</html>Obviously style as you want it ;)
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
