I am having an issue getting my fixed position navigation menu to overlap my text, a example of this is: http://www.saveur.com/michel-roux-scrambled-eggs-with-asparagus-and-crab-recipe
With the code I have currently managed the fixed position navigation appears behind the text, but I want it to be at the top and overlapping at all times, just like the website above.
All of the content is fixed position, I have made this so that if any one could help me they could just edit the code easier.
HTML: http://pastebin.com/j7jHjb4h
CSS: http://pastebin.com/sWuLChut
How can I make it so that the navigation menu stays at the top even when scrolling down just like the website above.
Just add a z-index value to the fixed element:
z-index:100;
If larger than any other z-index on the same level, it will overlap everything as needed.
#navMenu {
margin:0;
width:200px;
height: 1px;
z-index: 1000;
}
You could try to give it a high z-index
Related
I'm currently in the middle of experimenting with creating web pages and have come across a problem when trying to make a fixed navigation bar to the top of a web page while scrolling.
I'm able to get the navigation bar fixed to the page using
position:fixed;
but, the problem i'm having is the content below the nav bar (Main content) is pushing to the top of the page instead of staying directly underneath my fixed nav.
I've tried using margins to correct this problem, but doesn't seem to be working.
Thanks in advance
When you use position:fixed you removed the affected element from the actual flow of the document.
The quickest and most effective work around is to wrap your content in a div and displace it from the top of the page by the same amount as your nav...
<div class="fixed">my nav stuff</div>
<div class="my-pushed-content">my content is here</div>
css:
.fixed {
position:fixed; height: 50px;
}
.my-pushed-content {
position: relative //or absolute depending on your needs
top: 50px;
}
Hope this helps!
I have a JS image slider that I want to go under the fixed menu on scroll, But the slider has to use CSS position:Relative to work. (I can make it go under the nav bar with different position types but then the image slider doesn't work as it should)
How can I keep the slider working but make it go underneath my fixed menu bar?
Here is the page before scroll:
http://i.imgur.com/JdYL7gx.jpg
Here is the page when the image slider is in front of the nav bar: (I don't want it to be)
http://i.imgur.com/Mt8bLGk.png
here is how the content should be behind the menu:
http://i.imgur.com/6MzVy63.png
Set the z-index of your slider to a negative number to move it behind the header.
example
#slider {
z-index: -9999;
}
Or, set the header to a higher z-index to move it above everything else.
example
#header {
z-index: 9999;
}
If that doesn't work, share the code so we can help figure it out.
I wanted to build a website from scratch, I started adding nav bar which seems to work fine and after that I added a few div tags as "fixed".
I need it to be in such a way that when I scroll the nav bar should be fixed and the rest of the content to be scrolled...
I have attached the project below
From what you are describing I think I have a solution.
In your nav bar you need to put <nav style="position: fixed; top: 0;">CONTENT</nav>
This will make it never move and be stuck at the top bottom: 0; will make it stick on the bottom
Update:
Change your code to this:
<section class="color-1">
<nav style="position: fixed; top: 0;">
Ailurophile
Sumptuous
Scintilla
Propinquity
Harbinger
</nav>
</section>
I think i have a solution for your problem.
In your project #navber element overlap the section element when you going to set position:fixed .Now if you set any positive value of z-index for section, then it overlaps navbar element
You just have to set one property...
section{
position:fixed;
z-index:1;
}
Fixed elements are those elements which removed from the flow of document.
Without any z-index value elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top).
but now section element overlaps navbar.set property for navbar as follow
#navbar{
margin-top:50px;
}
I have assigned a fixed positioned menubar a high z-index, yet it still appears below other elements on my website. Is there an alternative technique I could use or something wrong with the code I have written. My website with the issue is here (note: you need to scroll up after scrolling down for the navbar to appear). The menu bar that is not appearing properly has the following code
#headerfull {
position:absolute;
top:-100px;
left:0;
z-index:10000;
width:100%;
height:100px;
background-color:#000000;
opacity:.7;
display:none;
}
but, for some reason, the z-index does not work. Elements like the "NinjaWarrior.info" image in the front and center, with a lower z-index appears in front of the navbar. The code for that image is below
<img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site">
Add this css:
#header {
position: relative;
z-index: 10000;
}
z-index works on containers with the same stacking context.
In your code, the DIVs header and content are siblings, and that's a condition for z-index numbers to apply.
The most easy way of memorizing this rule is by "code versioning":
<DIV with z-index=1>
<DIV with z-index=3/>
</DIV>
<DIV with z-index=2>
So, like decimals, or versioning number, 1.3 will never be greater than 2, and therefore the inner DIV will be always rendered below the second outer DIV.
Other than that, you need to apply positioning to each DIV which sets z-index.
I just set a big number because I was lazy, you can find a good feasible number by yourself if you want =), but this code works as I tested it on your website.
Thank you.
Be sure to read: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
z-index is not working for me on child elements because of width and height which is declared ,I started adding {display :Inline} on my parent div on hover of child div.
How to clip my top bar with screen. So as I goes down on page i mean scrolling down the page the top bar should also move. Just like in Facebook the top bar moves on screen.
I am searching google from last 2 hours. But unable to get, that what we calls it.
and my HTML/CSS is ..
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
}
HTML
<div id="topnavbar">
</div>
You're talking about fixing the position of the navbar to the top of the screen, right?
top:0;position:fixed;
-
#topnavbar {
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
top:0;
position:fixed;
}
In CSS, positioning elements is a fundamental concept. In this case, you want a fixed position. According to MDN, you should adhere to the following guidelines for fixed position elements:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
To reiterate, if you want to keep an element in the same position, regardless of where the page is scrolled, use position:fixed
#topnavbar{
position:fixed;
}
Example
It seems there are some sort of image slider on your page. So what I will suggest you to include z-index also.
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
position:fixed;
z-index:500;
}
What you need to search for is how to use the css attribute position: fixed; to have a div or other element 'stay where you put it' relative to it's containing element.
Really quick and rough example:
http://jsfiddle.net/c93cK/