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
Related
I want to make a fixed menu in HTML and it does not turn out very well for me, my menu is on the slider and I want it to scroll and emerge and have color. I just managed to keep it floating by placing it in the CSS position: fixed, does anyone know how I can do it?
Beforehand thank you very much.
slider
Use list to make ur menu.. then in css give each list element float:left. Also use a div tag make sure to put ur list in div tag... position:fixed auto
I'm working on making a horizontal desktop navigation responsive. I've changed it to be displayed horizontally on smaller screens but now I have the issue with the drop down submenus, as they cover the parent items underneath. Instead I want the other parent items to be pushed underneath the dropdown.
So something like this
Is it possible to achieve this without jQuery? the people the website is for want to avoid using any more jQuery.
Without seeing code i'm just guessing here...
Try making your dropdown menus relative positioned.
.sub-menu {position:relative;}
Some time help for the this resources[http://www.w3schools.com/bootstrap/bootstrap_case_menu.asp]
Thanks,I've sorted it with setting the height to 100% and changing the position to relative
I made a fixed navbar, but when I scroll you see the navbar behind the other images. I don't know what I am doing wrong. Here is a link with the navbar (it supposed to fit in the white bar but in Dreamweaver it all looks good).
So I want the fixed navbar that scrolls over all the divs. Please help.
Thanks
Could you use in your CSS the z-index property?
Like so:
z-index:999;
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 .
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 :).