We Keep Coding

Sticky Navigation Jumps to Top on Responsive

Here is a pen. I also have a live version.
I created a responsive nav with dropdowns, and everything works perfectly. I was working on making it sticky, as in after you scroll past a certain point, it becomes fixed to the top.
It works fine, except when you resize the page until the responsive hamburger menu shows up and click on it. The page then jumps to the top.
Here's my code for the sticky.
$(window).scroll(function () {
if ($(window).scrollTop() >= $("header").height() + 30) {
$(".sticky").addClass("fixed");
$(".content").addClass("margin");
} else {
$(".sticky").removeClass("fixed");
$(".content").removeClass("margin");
}
});
And here's my css where the hamburger lives.
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #efefef;
height: 70px;
width: 70px;
}
And here is the code for the navbar.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
Nothing has a fixed height outside of the sticky class.
Thanks!

Here is the fixed code.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
To prevent an action happening on click toggle, add href="#!" to the a tag. Now the screen no longer jumps to the top when I click on the hamburger nav.

Keep UL visible when hovering from div to UL

I've got a custom header / nav where I have two elements that represent two sections of a website. I want to be able to hover over one of the elements and display a particular menu. However the Menu list isn't a child of the element. So I can't do it with CSS.
The problem i'm having is when I hover over the element, the menu shows. But I move my mouse to hover over the menu and and as soon as move away from the element the menu disappears. I have tried adding a display:block to the manu items, with a .delay() method running but there is still a slight flicker when moving the mouse away from the div.
Here is my current code:
//HTML
<header>
<a class='hoverOverOne'>Hover over me to show menu</a>
<a class='hoverOverTwo'>Hover over me to show menu</a>
<nav>
<ul id='menuToShow-One'>
<li>testing</li>
<li>testing</li>
</ul>
<ul id='menuToShow-Two'>
<li>testing</li>
<li>testing</li>
</ul>
</nav>
</header>
// jQuery
jQuery("a.hoverOverOne").hover(
function () {
jQuery('#menuToShow-One').slideDown('medium').delay(500);
},
function () {
jQuery('#menuToShow-One').slideUp('medium').delay(500);
});
jQuery("a.country").hover(
function () {
jQuery('#menuToShow-Two').slideDown('medium').delay(500);
},
function () {
jQuery('#menuToShow-Two').slideUp('medium').delay(500);
});
// CSS
#menuToShow-One{
display:none;
}
#menuToShow-Two{
display:none;
}
Any help would be much appreciated.
Thanks.

$(function(){
$("a.hoverOverOne, a.hoverOverTwo").hover(function () {
var menu = '#menu'+this.id;
$('.menu').not(menu).slideUp(0);
$(menu).slideDown('medium');
});
$("ul.menu").mouseleave(function () {
$(this).slideUp('medium');
});
});
a.hoverOverOne{
margin-right: 20px;
}
#menuToShow-One{
display:none;
}
#menuToShow-Two{
display:none;
}
nav{
display:inline-block;
}
ul li{
display:block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<header>
<a class='hoverOverOne' id="ToShow-One">Hover over me to show menu 1</a>
<a class='hoverOverTwo' id="ToShow-Two">Hover over me to show menu 2</a><br />
<nav>
<ul id='menuToShow-One' class="menu">
<li>testing menu 1</li>
<li>testing menu 1</li>
</ul>
<ul id='menuToShow-Two' class="menu">
<li>testing menu 2</li>
<li>testing menu 2</li>
</ul>
</nav>
</header>

Check the following solution. No need for JS to power this one.
#hover-one:hover ~ nav ul#menuToShow-One,
#hover-two:hover ~ nav ul#menuToShow-Two {
max-height: 500px;
transition: 0.2s;
}
#menuToShow-One,
#menuToShow-Two {
max-height: 0;
transition: 0.2s;
transition-delay: 1s;
overflow: hidden;
}
nav:hover #menuToShow-One,
nav:hover #menuToShow-Two {
max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<a id="hover-one" href='#hoverOverOne'>Hover over me to show menu</a>
<a id="hover-two" href='#hoverOverTwo'>Hover over me to show menu</a>
<nav>
<ul id='menuToShow-One'>
<li>testing 1</li>
<li>testing 1</li>
</ul>
<ul id='menuToShow-Two'>
<li>testing 2</li>
<li>testing 2</li>
</ul>
</nav>
</header>

Flexnav Menu Buttons using only the width of their content

I would like to know, if it is possible to use flexnav without it's fixed width buttons.
It would be great if all nav - items only use the width they need to display their text + their padding. At the Moment I've to divide 100% with the number of nav items we have. This value is set with .flexnav li{}
<div id="wrapper">
<h1>Flexnav - Content Width Test</h1>
<div class="menu-button">Show Menu</div>
<div class="nav-container container">
<div class="nav">
<ul class="flexnav" data-breakpoint="800">
<li>Startpage</li>
<li>About Us
<li>Products
<ul>
<li>Product Category 1</li>
<li>Products</li>
<li>Large Product Category</li>
<li>Small one</li>
<li>PPPPProducts</li>
</ul>
</li>
<li>Media</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
<p>The red space is needed for a search and some Icons</p>
</div>
I've made a codepen, so that you can see the working nav. I hope someone hopefully could give me a hint how to solve this problem:
http://codepen.io/anon/pen/aCjGq
Thanks!

'At the Moment I've to divide 100% with the number of nav items we have.'- no need to do that. Just give the container div of the menu a width and use the flexnav plugin in the following way :
$(".flexnav").flexNav({
'calcItemWidths': true , // dynamically calcs top level nav item widths
});

The question is old, but this might help someone. You can add this to the CSS:
.flexnav > li {
width: auto;
}
.flexnav > li.has-subitems {
padding-right: 30px;/*to account for the menu dropdown icon*/
}
.flexnav li ul{
padding-left: 0 !important;
min-width: 210px;/*or whatever you want*/
}

Jquery toggle function not working

Can someone tell me why this isn't working?
HTML
<head>
<body id="top" class="home page page-id-1412 page-template-default logged-in stretched open_sans open_sans siteorigin-panels" itemtype="http://schema.org/WebPage" itemscope="itemscope">
<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="header_meta" class="container_wrap container_wrap_meta">
<div id="header_main" class="container_wrap container_wrap_logo">
<div id="header_main_alternate" class="container_wrap">
<div class="container">
<nav class="main_menu" itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation" data-selectname="Select a page">
<div id="megaMenu-sticky-wrapper">
<div id="megaMenu" class="megaMenuContainer megaMenuHorizontal wpmega-preset-vanilla megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnClick megaFullWidth wpmega-noconflict megaMinimizeResiduals themeloc-avia megaMenu-withjs">
<div id="megaMenuToggle" class="megaMenuToggle">
<ul id="megaUber" class="megaMenu">
<li id="menu-item-8" class="jrm-um-sticky-only menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home ss-nav-menu-item-0 ss-nav-menu-item-depth-0 ss-nav-menu-reg um-flyout-align-center ss-nav-menu-with-img ss-nav-menu-notext">
<li id="menu-item-1459" class="my_custom_class menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children mega-with-sub ss-nav-menu-item-1 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-fullWidth mega-colgroup mega-colgroup-6 ss-nav-menu-mega-alignCenter">
<a href="#">
CSS
#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;
z-index: 10;
display: none;
}
JS
$(document).ready(function() {
$('.my_custom_class').click(function() {
$('#overlay-2').toggle();
});
});
I want the #overlay-2 to be hidden when the page loads and then toggle show/hide when I use the menu button with a custom class assigned in wordpress nav menu "css classes" metabox. .my_custom_class is what I assigned it.
Why isn't this working?
If you could supply the corrected code that would be great :)
Thanks!

Simply cause you don't have any .my_custom_class in your HTML
If you add a
<button class="my_custom_class">Toggle Overlay</button>
both in your document and inside the overlay you're good to go:
LIVE EXAMPLE

Pushing HTML page to one side

I'm trying to implement a sidebar to my Twitter Bootstrap 3 application. When I click a button, a fixed positioned nav nav-pills nav-stacked appears on the left side of my page. And I gave z-index:1000, so it appears on top of my content.
Fiddle: http://jsfiddle.net/mavent/8YtDS/14/
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header"> <a class="navbar-brand navbar-left" href="/" title="">
MyBrand
</a>
</div>
</nav>
<div class="col-md-3" id="mysidebar" style=" top: 0;bottom:0; left: 10px;
position: fixed; height: 100%; background-color: #faff18;
opacity: 0.9; overflow: hidden; z-index:1000; margin: 0; padding: 0; display:none;">
<div style="position: relative; top: 60px; background-color: #7d1c80; opacity: 0.9;">
<ul class="nav nav-pills nav-stacked">
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
</ul>
</div>
</div>
<div class="row" style="background-color: #aaa;">
<div class="col-md-offset-3">
<button> </button>
<button id="mybutton" type="button" class="btn btn-info">Click me to toggle</button>
</div>
</div>
But I need different behaviour, when sidebar appears my page will be pushed to right side. Check this page and click top left button. How can I get this behaviour with css/js ?
http://jpanelmenu.com/

A general practice would be to add a class to either the <body> tag or a main wrapper called something like navopened on the button click.
Once the class is added, you then can target any element using the class, and move your 'entire' page with either positioning: position:relative; right: -[nav width]px
or transforms: transform: translate([nav width]px)
Transforms have better performance, but less browser support.
CSS Example:
/* before, without body class added */
body #outsidewrapper{
position:relative;
right:0px;
}
/* after, when the click event adds the class to the body */
body.navopened #outsidewrapper{
position:right:-300px;
}
Now, it's important to note that you shouldn't be moving the body tag itself, as it has potential to hide your nav. I would move an outer wrapper instead.

I can see two ways to accomplish this.
Replace position: fixed with float: left.
a. See http://jsfiddle.net/kdcTc/
b. Without bootstrap http://jsfiddle.net/5kPNd/
Moving the sidebar to the top, makes the top navbar shift to the right as well. This does not work with bootstrap. It seems, there is some condition in the bootstrap navbar classes, which prevents the shift.
The class navbar-fixed-top seems to pin the top navbar. Removing it allows the brand navbar to shift, but has other side effects too.
Move the main panel and the navbar to the right, using a margin-left
See http://jsfiddle.net/7eEaB/2/

Okay, so I did a few play arounds, one with my code and one with your code.
edited your one...
http://jsfiddle.net/8YtDS/15/
My one (button placement is pore, but you get the picture)
http://jsfiddle.net/e6JnT/1/
My one can toggle it in and out...
The main part's is having a wrapper around the part's you want to move around... which would be your code in your case, and then you just move that or resize that accordingly.
I did slide it left but you can do it with size so you don't miss anything.
So into the code.
$("#mybutton").click(function () {
$("#wrapper").animate({
left: '200px'
});
$("#mysidebar").animate({
left: '0px'
});
});
So I use the animate function in jQuery as it's the most versatile function to move an element around and making it look nice.
and all I'm doing is sliding the element to the left to 200px to make room for the menu, and the slide the element with an id of 'myslidebar' to '0px' to make it able to been seen.
Edit: http://jsfiddle.net/8YtDS/18/

Try this...
http://jsfiddle.net/8YtDS/17/
HTML
<div id="wrapper">
<div id="menu-panel">
<ul class="nav nav-pills nav-stacked">
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
</ul>
</div>
<div id="content">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="/" title="">
MyBrand
</a>
</div>
</nav>
<button id="mybutton" class="btn btn-primary">Click me</button>
</div>
</div>
CSS
#wrapper{
position: relative;
height: 100%;
background: #F90;
}
#menu-panel{
width: 100px;
position: absolute;
left: -100px;
top: 0;
height: 100%;
}
#wrapper.open{
margin-left: 100px;
}
Javscript
$("#mybutton").click(function () {
$("#wrapper").toggleClass("open");
});
Just a note from experience: avoid using jQuery animate to 'smooth' the slide. On certain browsers it was very jittery for me. CSS transforms should be used if possible, as I believe they are handled by GPU, jQuery as a fail safe (see Modernizr).
Hope that was of some help!
Thanks
Phil