I placed a sticky navigation on my page which should always be visible on front. When you scroll down on page 2 of my site you'll find out that the navigation is placed behind some other buttons.
Could someone please help me with placing it always on the front?
This is the url of page 2 of my site: http://kmnew.kadushimarketing.com/index.php#targetAnchorPage2
Just scroll down and you'll see what I mean.
Solved! I set the z-index to 999999.
Related
How to let the elements in the page go under the sticky navbar when scrolling down and not above it and hide it ?
I copied the code from w3 schools to my Angular project but when i scroll down, all the elements go above the navbar and it hides it.
You need to probably add a z-index to the navbar to make it present on the foremost layer of the screen.
Have a look at this link for a much deeper information on the same.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I have a fixed header in the top of my page and also I used anchors in angularjs. My problem is when I clicked anchor 1 the div jump in the top of the page and I cannot see it. The anchor is behind of the fixed header which should not.
How can I fixed this one. Thanks in advance.
I am currently referring to this plunker: http://plnkr.co/edit/0ZqAWjHZbTJCtlDL2qpu?p=preview
I have a simple position:fixed sidebar out of the way of page elements. The page scrolls fine, but when I mouse over the fixed sidebar, the page can no longer scroll. Could someone explain why this happens? and how to fix this?
This happens because only the part you hover over scrolls. For example if you create an element with "overflow: scroll", when you over over this element, it will scroll and not the whole page. Same thing is happening over here.
The website I'm building features a large background header image with a transparent fixed navigation bar on top. View it here: www.bedriftsdesign.no
Right now when you scroll the content scrolls over the header image just as planned, but when it reaches the navigation bar, I'd like it to disappear under the content, the same way the header background does, but it stays on top. To see the effect I'm trying to get, take a look here: http://www.googleventures.com/
Any idea on how to solve this? I've tried messing about with the z-indexes with no result yet.
Would be really grateful for some help.
Add to your <feature> tag that holds all the content, the following css:
feature{
position:relative;
z-index:10;
}
You should probably put it as an answer if it worked for you :).