I am working on a Drupal-7 website using the openpublic theme.
I have modifed the css to make the header fixed, but when I scroll the page - the content scrolls over my navigation menu. Can anyone tell me what needs done to prevent this? The content also scrolls above my header. I would like the content to stay below my header and menus.
I have chosen a specific page, because the template for the front-page is different.
Thank you in advance.
it happened because your div position is set to fixed.
example
.div_class_name {
position:fixed;
}
Changing the value might help.
You can use firebug(Firefox) or Chromebug(Chrome) to check your CSS .
Related
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
So I have a site that scales down gracefully in the browser window but I am having an issue with the content outside of my header. The main and footer elements are just hovering in the middle of all my content. I believe it may be something to do with the height I set to the header but I need to space out all the elements within that correctly.
Heres a link to the site: http://nathanlangley.co.uk/sitev5/index.html
Any help will be greatly appreciated.
"I believe it may be something to do with the height I set to the header"
I just followed your link, and, following your suggestion, tried taking the height attribute off the header. It fixes it.
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 :).
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.
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?