I am trying to make the top menu bar float at the top of the page here:
http://www.landedhouses.co.uk/
So that when a user scrolls down the menu is still displayed.
Unfortunately adding position:fixed to the CSS doesn't seem to do the trick, various elements still float around. Can anyone point me in the right direction?
just add on style.css
.strip{
position: fixed;
z-index:1;
width:100%;
}
Related
I'm trying to create a fixed navigation bar on the left of a site using Bootstrap. This is the site: link
The scrollspy seems to work but the nav div seems to be underneath the Bootstrap containers (visible when scrolling the page, the white line separating the sections seems to be on top of the navigation bar). Also the navigation items aren't clickable.
How can I fix my navigation bar? Is it's placement outside the Bootstrap grid the problem (sadly I don't know a different solution as I use containers and rows for the separated sections of the site)?
Thanks in advance for the help and I hope the CSS isn't too bad O:-)
Add this style to scrollspy menu:
.scrollspy {
width: 50px;
position: relative;
z-index: 999;
}
Fella's!
I'm trying to create the same effect as the iphone search bar on the homescreen.
When you click on the body of my page, a bar will appear and the rest of the page will become blurry. Now there is a problem, The white bar on the top should have a hard border but on the bottom the blur of the .page gets over it. I tried to change the z-indexes but it seems that there is not the solution.
Can someone help me with this?
Your blur effect is bleeding into the header div. Give your .page section overflow: hidden; to avoid this.
jsfiddle
Just add simple line in .page to avoid outside blur effect:
overflow:hidden;
Working DEMO
I hate CSS, because always hard to predict what it will render into. Can you guys help me to fix this thing...
I need the right side of elements in dropdown menu aligned right under the arrow. First I thought if I do position:absolute, and then just move left to number of pixels, it will work, but if the username changes it breaks everything again
here's the fiddle for your convenience
http://jsfiddle.net/Mwd2A/1/
thank you
If I understood right, you want to when hovering the arrow, that submenu appears right aligned with the arrow.
If it is that:
Add css attribute to .userSubmenu
position: relative;
Add css attributes to .userSubmenu ul
position: absolute;
right: 0;
JSFiddle:
http://jsfiddle.net/Mwd2A/5/
I'm trying to prevent my right hand side div from moving to the left after I have used the affix property.
Any iudea how I do this please. You can see the issue here, just scroll down please:-
http://monkeygetnews.jonathanlyon.com/bs.html
Thanks
Jponathan
When activated, scroll spy adds the class affix and position: fixed to the div it's spying on. This positioning takes the div out of normal flow and here the result is that it's floating to the left.
The solution is to add some css styling to float it where you want. In your page I think it would be something like:
.span3.affix{
position: fixed; /* to stop the div from scrolling */
top: 0; /* to fix the div at the top its containing element */
right: 0; /* to fix the div at the right of its containing element */
}
You might have to play with this a bit to get it where you would like. The important thing is that once you know the selector (in this case) is .span3.affix it's easy enough to work with.
Good luck!
I have been trying for an hour to get a list in a sidebar of WordPress to have a negative margin. Fooled around with margins, padding, sidebar placement in the php files... But the link images just keep disappearing behind the background.
Here's the page where I'm working: http://kirahenschel.com/
This is what I am trying to achieve:
http://emgraphics.net/kira/idea2-11.jpg
Ideally I'd also like that sidebar to be a finite height so the white boxes on the bottom spread, but I can cope with them being off to the right.
Anyone have any ideas? Neg margins are working fine on the logo, so it is just a list thing?
Thanks
If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.
#nameoflistdiv {
left: -20px;
}
You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.
If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code
margin-left: -20px;
really should work in this application as well, so show us what you've got.
Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.
#main {
background: url("images/blend.png") repeat-x scroll center top #2765CA;
clear: both;
height: 630px;
overflow: hidden; /* delete this line */
padding: 0;
}