I have a fixed bar on the top of my site, when I scroll all "like" buttons and similar overlap with it.
How can I prevent it from happening?
You can see what my problem is here:
http://chusmix.com/chusmix/?ciudad=Buenos%20Aires
I'm assuming the fixed bar is floated, have you tried changing the z-index of the bar to something like 9999?
Related
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
Please help me to fix menu on the top of the body and that should be scrolled horizontally.
I used position:fixed for the particular <div> tag with top:0;left:0 values. But when I resize the window to 50%, the fixed menu appearing only 50% remaining part was got inside the border (not appearing).
Please make me to fix this problem to view the menu with scrolling when we decrease the window size..
You can use bootstrap this will help you to fix the nav bar and this will not disturb the page on resizing the content. You can see the example 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 :).
I would like an element fixed to the top of the viewport, when the user scrolls down the page it remains at the top of the viewport... easy. If the window is narrower then 960px the horizontal scrollbars appear. If the window is scrolled horizontally I would like the content inside this fixed element to scroll with it.
Please check out the demo, the two green boxes should always line up. Make your window narrow and scroll horiz, notice how they no longer line up.
Is this possible without JavaScript? Should work in IE7+ and not totally break in IE6.
http://www.louiswalch.com/beta/t/_scrolltest4.html
I don’t think you can achieve that without JavaScript.
position: fixed means that the element is positioned relative to the viewport. You want that vertically, but you don’t want it horizontally. I don’t think there’s any way to achieve that in CSS.
You can't have position:fixed on an overflow scrolling content. You need to use JavaScript for this. i answered a similar question using jQuery at Fixed header inside scrolling block where a div is fixed even if content is scrolling by overflow.
Check working example at http://jsfiddle.net/VswxL/3/
I'm working to build a CSS layout that has a fixed header, lefCol and Right Col, but the height of the MainCenterColumn (#mainCol) can scroll.
Here's what I have so far: http://jsfiddle.net/DscT6/
The issue with this is, on the mac you can scroll by dragging your fingers on the touchpad. I noticed that the scrolling only works if you mouse is over the MailCol, if your mouse is over the Left or Right Col the page doesn't scroll. Any ideas? Have you seen this? Suggestions? thanks!
Here http://jsfiddle.net/laukstein/DscT6/3/ it works fine.
I agree with polarblau, if you add overflow: auto that element will automatically have the scroll as needed, if you remove the overflow rule the entire page will have the height of the highest element and so it will scroll.