So I'm currently building a website for school and I've put the navigation bar so its fixed, but now the div slides behind the navigation bar, its really not that noticable but it is just bugging me. Does anyone know if there is a way to fix this?
Without the fixed positioning : http://prntscr.com/18kufb
With fixed positioning: http://prntscr.com/18kurb
The Website : http://penguin.baileywhite.vacau.com
CSS File http://penguin.baileywhite.vacau.com/library/css/style.css
I know its a lot to look at for so little to fix, its just really bugging me and if anyone can help fix this it would be highly appreciated.
Thanks!
Bailey.
On the .pure-g-r set margin-top: 36px; and on your #nav set top: 0;. This will assure you that your navigation will always stick to the top of the window.
Related
Hope I can explain my question so you understand :)
I have a sidebar with position: sticky which moves the sidebar when scrolling down the page. My problem is now, when I scroll the page complete down, there is another element which get covered from the sticky sidebar. Is it possible to move that element down also when reaching it with the sidebar?
Please see my page for reference, so you´ll know what I mean. The clue would be to do it with css only?
https://heimprofi.shop/bodenbelaege-sockelleisten/sockelleisten/altberliner-hamburger-profil/
Hope you guys can help me out. Thanks a lot.
I tried to make my nav bar fixed. It works, some content flow under it well. But for some reason, a section instead flows over and covers it. Please how can I fix this?
Sorry for this. Found the answer. I had to set z-index of the fixed nav bar. Found the answer here - w3schools
I want to fix this menu bar at the top of the page, so that when user scrolls down, the menu bar continues to appear and the content flows into it. I tried everything, some help would be nice.
Heres the CSS and below the HTML:
CSS: https://www.dropbox.com/s/a0z0eov71wvha1c/style.css
HTML: https://www.dropbox.com/s/qyvb0oqhx8550ym/html.txt
Thank you!
Use the position: fixed css property. Then the position of the div is relative to the window's viewport rather than the content of the page.
You spelled position in #navigation wrong in your stylesheet, could that be the problem?
This is really easy if you correctly understand how the position attribute works in css.
I have a demo which should help you. You just need to understand how position:fixed is used to make the menu bar stick to top.
http://codepen.io/anon/pen/mvGqf
I've recently launched a website and seem to be having a problem with a static page I have created. It isn't a major issue but it is really bugging me!
The website in question is: http://gadgetmill.co.uk/
Basically I have hidden the horizontal scroll bar via CSS but want to get to the root of the problem and solve it rather than cover it up. The problem is that the website keeps wanting to scroll horizontally when there is no visible content to the right anyway.
I'm assuming it is the footer that is triggering this but would be very grateful if someone could tell me what to change to fix this?
Thanks a lot, and a happy new year!
I checked your site on firebug
Seems like
.footer-wrap {margin :0 -8em}
is causing it. Cant figure out why you applied it, guess you can either do away with it or work your way around it. Disabling it fixed things for me.
Just remove that padding: 0 1em; and width: 96% on body and set right:0px on element with id socialslider
in .footer-wrap (custom.css)
change the margin from
0 -8em
to
0 auto
this works for me using firebug in chrome.
Hello once again :) !
Can anyone accidently help me with this problem.
I saw very few sites before, but never bookmarked any of these.
If I have body background, fixed header and inner background, where the content is...
And if I want to scroll down to see more content/inner background, my image goes above header behind and I don't know how to make it to disappear behind headers top margin. Anyone can help me with this , please ?
Images:
Normal body background, fixed header and inner background below header
http://screensnapr.com/v/HbcNXA.png
Body background, fixed header and scrolled inner background below header, went above header's position.
http://screensnapr.com/v/TKVVuy.png
I know my English is not good enough to explain this... But let's say.
"Hey I am content background, I am standing below header and when someone scrolls me, I am disappearing at the start of header's position." :)
Thanks!
EDIT:
http://jsfiddle.net/WbtQd/
Scroll and you will notice what I want.
EDIT 2:
Seems like someone play with fiddle... Anyway, here is site example:
http://www.monofactor.com/portfolio/mcfc-auctions/
Except that my header have lets say: top: 50px;
So if we add on his site top: 50px; even he have same problem like me :)
http://snpr.cm/OrXCWa.png
EDIT 3:
http://snpr.cm/GNZaGd.png
I; not sure if I understood you completely. You mean that whenever you scroll your page, the main body passes under the header. probably this is because the header is fixed. You can try to make your main body div scrollable. This way, whenever you scroll down, only this specific div will scroll.
Im not sure what your trying to achieve exactly, but zindex in css can make items appear above others. Add this to the header css code:
#yourheaderid {
z-index:10;
}
I have created a jsfiddle of how you should markup your fixed header and the css to go with it.
http://jsfiddle.net/LYT6V/
I'm assuming this is the result you were looking for?