Develop Reference

bootstrap popup modal overlapping page header

I am trying to create a webpage that has a header that is always on top of everything else. If I add a bootstrap modal to popup, it has a grey area that covers the header.
I've tried setting the z-index for both my red background header element, and my modal-popup element, but it just results in the modal grey box being overtop my red navbar which I am trying to avoid.
https://jsfiddle.net/martinradio/u03f1zyo/21/

When a modal pop up, it's created a div element on the top levels of the DOM, I went through a similar problem and setting the z-index like that solved it:
.modal-backdrop.show { z-index: 1000 !important; }

Your Header has default position which is
position: static;
Change it to:
CSS
header{
position: relative;
z-index: 1041;
}
This will fix your issue. If you want to make your header sticky in future. position: fixed will also work. You should avoid touching Modal box z-index and instead change z-index of components on case by case basis.

How can I make a bootstrap navbar stay on top after scrolling down? (It's more complicated)

Here is the picture of my website header.
HERE
How can I make the blue navbar scroll smoothly to the top while i scroll down the page
(only the navbar, not the logo&social media stuff part)?
position:fixed; won't let the navbar move to the very top when I scroll down (obviously).

navbar {
margin: 0;
padding: 0;
overflow: hidden;
}
Try setting the margin and padding of the navigation bar to 0.It should work

I think you are using Bootstrap, so you can use Bootstrap Affix: http://getbootstrap.com/javascript/#affix
With the data-spy, data-offset-top and data-offset-bottom properties you can add affix behavior and define when to toggle the pinning of an element.

Side by side fixed divs - one is overriding the other

http://codepen.io/justinturner/pen/VjyWJE
The linked codepen has a fixed header div.
I'm using javascript to add a menu div on the left when the hamburger icon is clicked. This is also a fixed div.
When the menu div is added, the header div seems to revert to relative positioning, and jumps to the top of the main content div. Scroll down just a hair and then click the hamburger, you'll see what I mean.
What issue am I running into here? When a user clicks the hamburger, I want the header to remain fixed and translate directly to the right like the rest of the content.
<em>too much code to paste</em>

According to the spec and other similar questions here on SO, fixed elements and translates don't "play" well together.
As a workaround you could:
1) Use transitions (eg. on the left property) instead of transform (translateX)
2) Remove the position:fixed button from the container which uses transforms
Following the first suggestions from above (using left instead of translateX), edit your code to the following and the issue should no longer persist.
.o-wrapper.has-push-left {
left: 300px;
}
.o-wrapper {
position: relative;
transition: left 0.3s;
}
#header-wrapper {
transition: left 0.3s;
}
.has-push-left #header-wrapper {
left: 300px;
}
DEMO

Jquery slideToggle to slide a div from the top of the screen - but top of screen changes during scroll and div is not visible

I am using Jquery slideToggle to slide a div from the top of the page. The effect is working, and can be seen here (PLEASE HOVER OVER THE MEMBER LOGIN NAV BUTTON TO SEE EFFECT, the blue div will slide down):
My issue is, that when the page is scrolled downwards, the div is still sliding down from the very top of the document, not the top of the viewport window, so it is not visible. If you scroll down the page, and hover over member log in button on the right, you will see the problem (main nav moves down, but the hidden blue div is no longer visible).
I am wondering how I can recalculate where the top is, and tell slidetoggle to slide the blue down from there.
This may be helpful, the code I am using to affix the regular nav to the top of the page is the following:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});

Looks like you'll have to change your script around a bit, but the way I'd go about this is to wrap all your nav elements (the login form and the nav bar) in a div and give that div
position: fixed;
That way your nav will be fixed at the top of the window and the login form will remain at the top of the screen regardless of scrolling.
Like this:
HTML:
<div id="nav-section-wrapper">
<div id="login">...</div>
<div id="nav-wrapper>...</div>
</div>
CSS:
#nav-section-wrapper {
position: fixed;
top: 0;
z-index: 1;
}

Nav sub menu not staying visible when hovered over in firefox browser?

My nav is positioned at the bottom of the page, and the sub menu appears above the nav.
I also have a bit of jquery which fades out the content when the nav is hovered on. However I think this query is interfering with the sub menu, as it doesn't stay when one hovers over it, this seems only in firefox browser?
please have a look here on a firefox browser http://intelligen.info/index.html
$("#nav").hover(
function () {
$(".index-content").fadeTo(700,0.3);
},
function () {
$(".index-content").fadeTo(700,1);
}
);

Your gap is set way to high, using bottom leaves whitespace between the hover and the element you are hovering over. Also, I wouldnt use jQuery for adding CSS elements such as fading. You can use transitions to do that.
#nav li:hover nav {
bottom: 12px; /** Change to 12 to fix **/
display: block;
left: 0;
position: absolute;
}