I have a horizontal fixed header on top of my site and when I use page navigation to scroll to an ID, it puts the content I'm trying to scroll to underneath the header.
Is there a way I can offset where the page navigation shows up by 80 pixels (down)?
Edit: I was actually able to fix it myself in the simplest and most acceptable manner possible. I put the solution in an answer below.
Well, since no one else had an answer, I fixed it myself.
Here is the fix:
JSFiddle
This was done by making a hidden div that is absolutely positoned 'x' amount of pixlels above the content I want to scroll to. I then scroll to that div instead of the content I originally wanted to scroll to. 'x' should be the height of your header, this way the content you want to scroll to appears directly below your header like it should.
You can do that with CSS.
HTML:
<header>Your Header Here</header>
<div id=main>Rest of Content</header>
CSS:
header { position: fixed; height: 80px; }
#main { margin-top: 80px; }
Try reading this artcle from Chris Coyier. He cleverly uses a pseudo-element to solve the "fixed header in page navigation" issue. Take a look: http://css-tricks.com/hash-tag-links-padding/.
The example doesn't show how it works. I fixed it by adding:
#header {
opacity:0.5;
}
#content-scroller {
height:120px;
}
Related
I am trying to create a header which remains fixed at top but what happens is when i scroll down the page the header moves along with it while maintaining its position.
My requirement is that the header shouldn't move with the page as we scroll down.
JS FIDDLE:https://jsfiddle.net/qa5d1ry0/
Note: Its just a dummy code of my layout and i have added random text in order to get the code working
Note: I have tried using position:absolute for header but the problem is that header don't get displayed as we scroll
Try to give position: fixed; to the header and remove the relative position from container.
.header {
position: fixed;
}
Try to add top:0px; after your position:fixed; for the header/heading div.
It's fixed for me. Try position: fixed. What browser are you using?
Stacked Footer and Header
As the picture show the footer and the header are mixed together. I've tried to use
and just
But appears the exact same.
There're a few questions about positioning footer but their versions of CSS are really old so I couldn't fine the place to edit my Footer CSS.
It works if the body under header fill up almost whole page and let footer go after it, but if there's no contents at all, how do I fixed the footer to bottom of the page?
Thank you.
Use css to fix it to the bottom of a screen.
#footer {
position: fixed;
bottom: 0px;
}
<div id="footer"></div>
No need to change your footer. This is just an example as I don't know your actual code.
Some more examples:
<div style="position:fixed;bottom:0px;"></div>
<footer style="position:fixed;bottom:0px;"></footer>
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 an HTML page with
html,body{ height: 100%; }
But I have more content in the page than it can fit at 100%, so there is a vertical scroll bar. This is fine, but right before </body> I have a <footer>Some text</footer>. My problem is, the footer appears in the middle of the screen even though it's supposed to be showing at the very bottom of the page. I checked, there is no margin applied to any element that would push the footer that high up in the body.
What's weird to me is, when I use the Chrome Developer tools to inspect the page it shows the area covered by the body not to be the 100% of the scrollable area. This area is 100% of the page if there was no scroll bar.
I can't provide the markup, it's a legacy ASP.Net application and it's messy.
Try min-height: 100% instead. On html and body. Also it appears footer is absolutely positioned, but min-height should fix this.
If it doesnt afterwards then apply padding-bottom to body and increase it until footer is where you want it.
It depends a bit on how you want to solve this. If you know the page will always be shorter than the content you could move the footer down to the bottom with:
footer {
position: absolute;
bottom: 0;
}
Alternatively this is a task for flexbox (provided you can drop old browsers). Something like this should do the trick:
body {
display: flex;
flex-direction: column;
}
.main {
flex-grow: 1;
}
I have a fixed header element which stays fixed to the top of the page when a user scrolls down. I've created this jsfiddle to demonstrate how this looks.
How can I make the content element scroll over the top of the header element instead of scrolling underneath? I tried adding z-index: 99999; to content but this had no effect.
Minor modification: add
z-index:-1;
to header { }