I am having an issue on my site where I have a bootstrap (version 2.3.2) navbar fixed to the top of the page and then later in the body I have a bootstrap collapse object with a large amount of content in <pre><code> tags. The collapse opens and closes as expected; however, when I scroll down the page, the content in the <pre><code> tags overlaps the navbar at the top of the page. I have attempted to add z-index's to both the navbar and the collapse content; however, it doesn't seem to be working.
Below are the jsfiddle links. The offending overlapping content is at the end of the page. Thanks!
My code: http://jsfiddle.net/K3JAe/3/
Full Screen Result: http://jsfiddle.net/K3JAe/3/embedded/result/
The .collapse class has position: relative, making it a positioned element, and your navbar has position: fixed from the Affix plugin, making it also positioned. The accordion comes later in the DOM, which makes it stack on the navbar.
#Adrift's fix is the way to go: the affixed element at the top of the page needs a z-index to stack on any later positioned elements. I would go higher than 2 though for your future z-indexing uses:
/* Stack .affix on top of positioned elements later in the DOM */
.affix {
position: fixed;
z-index: 100;
}
Adding a z-index value to the .affix class above 1 seems to do the trick:
.affix {
position: fixed;
z-index: 2;
}
http://jsfiddle.net/K3JAe/5/
Related
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.
I have some content in uib modal window. I want that conent to be moved to top of the html (fixed to the top of the html).
I tried setting
position: fixed;
top: 0
Its going to the top. But its still staying in the Modal Content(not to the top of the webpage)
How can i pull this out of the div and stick to the top of my webpage?
fiddle Here: https://jsfiddle.net/Mahesh434/6ktc4g8j/
I fixed this using the below approach, hope this will help for someone.
adding css:
.modal-dialog {
transform: none;
}
Note: But not sure what is the impact of adding this line;
In my case the model is working as expected without any issues.
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.
I created a website with enough text, so that you are able to scroll (http://jsfiddle.net/o0emtyug/1/). On the right side I added some buttons for special functions on my website, which are positioned fixed and have a spacing using CSS top:XXpx;. Furthermore I placed the buttons within my menu bar div container nav-primary.
Using my JQuery script sticky-nav.js the menu bar is always visible on my page, even if I scroll down the page. So if I scroll down the page my menu bar stays on top of the page.
What I want to achieve:
I want my buttons to keep the same distance height from the menu bar all over the time. For this I will need to remove the CSS code top:XXpx;. If I do this, my buttons disappear. I tried changing top to margin-top but this did not solve my problem.
Anyone able to tell me what I need to do in order to arrange the buttons exactly below the menu bar, with the same distant height when scrolling?
I've added a test button with Absolute positioning in the nav bar, so it doesen't seem to be in the container, but inherits its position:
#test {
position: absolute;
right: 0px;
top: 100px;
}
Here the Fiddle
Remember that Absolute positioning is relative to the Body or the first container that have a specific position. In this case, top:100px is relative to .nav-primary, that has position: relative.
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;
}