Currently I am trying to figure out why when I put my browser in mobile view, that my mobile nav just disappears. I cannot seem to pinpoint what is causing the issue but when my navigation is in mobile view it is gone every single time I make my browser smaller. If anyone can help me figure this issue out it would be greatly appreciated! Thank you!
I had to put my code in a JsFiddle because it was just a little too long. Apologies for this, however, here is my fiddle: https://jsfiddle.net/99sc49a3/1/
Here is my html because stack wont let me post without code:
<header>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" crossorigin="anonymous"></script>
<script src="SlickNav-master/dist/jquery.slicknav.js"></script>
<script>
$(function() {
$('#menu').slicknav();
});
</script>
<nav>
<div id="fix">
<ul class="main-nav" id="menu">
<li>
<img id="logo" src="logo.svg" alt="logo">
</li>
<li>Home</li>
<li>Skills</li>
<div class="dropdown">
<button class="dropbtn">
<li>About</li></button>
<div class="dropdown-content">
Work
Education
</div>
</div>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
This is what is causing it
#media (max-width: 400px) {
#menu {
display: none; /* this line, right here */
z-index: 1000;
}
}
On taking a closer look at your fiddle, it appears you are using slicknav.js for your menu and the problem is you are calling .slicknav() before loading it.
Please see the updated fiddle with a working example. I placed the .slicknav() call on window.load event, when the slicknav has already been loaded.
Here's how I did it:
(function(){
$(window).on('load', function(){
$('#menu').slicknav();
})
})(jQuery);
Related
I believe I have some fairly decent knowledge of HTML, CSS, and JS. However, I am stuck on one little bug. Whenever I click my hamburger menu icon, an overlay appears giving the user options to navigate throughout my website. I have managed to disable the scrolling of the body whenever the hamburger menu is clicked, however, once the user clicks the appropriate anchor tag, taking them to their desired location on the website, I want scrolling re-enabled.
It may seem like a little fix but I've been battling with this bug for quite some time and my brain feels fried right now lol. If anyone can shed some light on it, it'll be much appreciated.
My code is below:
HTML:
<header>
<div class="container">
<nav class="nav-container">
<div class="menu-toggle">
<i class="fas fa-bars" onclick="lockScroll();"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-items nav-toggle" id="menu">
<li class="nav-links">
Home
</li>
<li class="nav-links">
About
</li>
<li class="nav-links">
Projects
</li>
<li class="nav-links">
Contact
</li>
</ul>
</nav>
</div>
</header>
CSS:
.lock-scroll {
overflow: hidden;
}
JavaScript:
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
} else {
$('body').addClass('lock-scroll');
}
}
You can call the remove scroll function again on anchor click:
$("a.nav-link").click(function(){
$('body').removeClass('lock-scroll');
})
I was hoping to pick your brains about why my right-side menu won’t open. It used to but after I’ve been fiddling about adding scrolling lightboxes it’s not any more. I am unable to identify if this is a html / css / js problem as have tried to revert to previously used html / css and js when the menu does pop-up and this hasn't resolved. I have also tried cleaning up the HTML and CSS and neither has worked so I have reverted back to what I find tidier working with.
This particular site is for fun and is adapted from HTML5UP's examples, for which this particular site is available here: HTML5 UP Phantom with a working menu - which is how mine was prior to adding in the lightboxes.
I will attempt to include my code and css and would be very grateful for any ideas about what has gone wrong. I have tried to include a JSFiddle but cannot see how to add multiple different javascripts in - but would be happy to if someone can let me know how to do this! I am wondering if this is a problem of the new JS scripts I've added conflicting with those that the menu would use.
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.dwt" class="logo">
<span class="symbol"><img src="../images/logo1.jpg" alt="" /></span><span class="title">Single in Brisbane</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Subscribe</li>
<li>Giveaways</li>
<li>Advertise</li>
<li>Contact</li>
</ul>
</nav>
Thank you kindly.
I'm new to web development and I dont have much experience. I have been trying to create a menu that becomes visible when the user clicks it. I have been able to make it pop-up but it doesnt stay visible. It becomes visible for a second and turns invisible again. I have tried this with the 'display' property as well. However, that has the same results. Here is my code:
<head>
<script type="text/javascript">
function opnmenu () {
document.getElementById("menu").style.visibility="visible";
}
</script>
</head>
<body onLoad="document.getElementById('menu').style.visibility='hidden';">
<div id="menubar">
<table>
<tr>
<td>
<div id="menuimg">
<form>
<input type="image" class="menubut" src="menu.png" alt="submit" onClick="opnmenu()">
</form>
</div>
</td>
</tr>
</table>
</div>
<br>
<h1> Entrepreneur</h1>
<hr>
<div id="menu">
<ul>
<li>Home</li>
<li>Motivation</li>
<li>Books</li>
<li>Videos</li>
</ul>
</div>
</body>
Any help will be appreciated.
Thank You.
Here is a sample using pure javascript (some code comes from the other comments) with more proper HTML5:
http://jsfiddle.net/59su4/1/
The problem with visibility: hidden is that the menu will take the place it would normally take if it was visible. Here is an example with visibility property:
http://jsfiddle.net/59su4/2/
(notice the empty space taken by the hidden menu)
[EDIT] after the author comment, I mixed the HTML, JS and CSS into a single code to show where each element goes in the page.
FULL PAGE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My menu is ALIVEEEE</title>
<style>
.menu {
display: none;
}
.menu.opened {
display: block;
}
</style>
</head>
<body>
Toggle menu
<nav class="menu">
<ul>
<li>Home</li>
<li>Motivation</li>
<li>Books</li>
<li>Videos</li>
</ul>
</nav>
<p>
To facilitate the process, AI Lab hackers had built a system that displayed both the "source" and "display" modes on a split screen. Despite this innovative hack, switching from mode to mode was still a nuisance.
</p>
<script>
var openMenuBtn = document.getElementsByClassName('open-menu')[0],
menu = document.getElementsByClassName('menu')[0];
openMenuBtn.addEventListener('click', function ( e ) {
// We don't want the empty link to be followed
e.preventDefault();
// Toggle the menu
menu.classList.toggle('opened');
}, false);
</script>
</body>
</html>
for a university project I am trying to implement a mobile menu to a responsive website. To do this I used the jQuery plugin mmenu.
Everything seems to work fine except for one thing:
Whenever I open the menu it scrolls to the top of the page instead of staying where it was. I also realized that I can't scroll the page while the menu is open (as opposed to the example here: http://mmenu.frebsite.nl/mmenu/demo/onepage.html)
My code is structured as follows:
<body>
<!-- Mobile Navigation -->
<nav id="mobilenav">
<div>
<ul>
...
</ul>
</div>
</nav>
<div id="wrapper">
<header class="mm-fixed-top hidden-desktop">
...
<i class="fa fa-bars"></i>
...
</header>
<div id="topbar">
...
</div>
<div id="content">
...
</div>
</div>
<div id="tothetop" class="hidden-desktop">
...
</div>
<div id="bottom" class="visible-desktop">
...
</div>
<!-- Scripts -->
...
</body>
You can see the problem in action at http://www.mikehudson.de/BA/.
Thanks for your answers in advance.
-- Mike
Are you using this Plugin along with Foundation 5. If so then you can change the html, body height from 100% to auto in the global.scss file.
eg...
FROM:
// Must be 100% for off canvas to work
html, body { height: 100%; }
TO:
// Must be 100% for off canvas to work
html, body { height: auto; }
If you do apply the 100% to the body/html, make sure you preventDefault() on the click event if your trigger happens to have a "#" in the href. This tripped me up.
I am working on a mockup and have created this:
http://cynthialarenas.billybluedigital.net/
I'm having a problem with my nav buttons: Play, About, How To.
If you click 'about' then 'how to' everything works fine, but if you go from 'how to' to 'about' the 'how to' disappears. How do I get all the buttons to work consistently and not disappear. Also I am noticing the slide transitions are actign a little funny, sometimes displaying a white banner.
I want the jquery to be just inside the content area but its appears to flash quickly above and over the footer.
Can anyone shed some light?
Here are some snippets of my code:
CSS:
#contentArea{
width:1024px;
height:522px;
background:#FFF;
float:left;
overflow: hidden;
}
#playSlide, #howSlide, #aboutSlide {
display: none
}
.toggleDiv p {
margin: 0 0 12px 0
}
HTML:
<div class="toggleDiv" id="aboutSlide">
<div class="navContainer">
<div class="menuItem">
<a class="show_hide" rel="#playSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png">
</a>
</div>
<div class="menuItem">
<a class="show_hide" rel="#aboutSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn.png">
</a>
</div>
<div class="menuItem">
<a class="show_hide" rel="#howSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png">
</a>
</div>
</div>
Gonna have to agree with Mitchell on this one. Using images for simple navigation like this is incredibly non-SEO friendly. Not only that, it's just plain unprofessional.
While I can't cause the problem to happen when I visit your site, I can offer an alternative to the images you're using.
http://jsfiddle.net/L2MVu/1
<ul class="nav">
<li class="active">play</li>
<li>about</li>
<li>how to play</li>
</ul>
As you can see, it's all editable, but still just as clean as you wanted from the images.
While this doesn't do a whole lot to save page-load time, it's always best to try to get a desired effect with pure CSS before resorting to images.