I have position fixed menu element which is hiding whenever you click/touch on darken area. And the problem is that whenever you are scrolling website this blank space appears under menu before it hides
screenshot with issue:
.
I tried to add more height to menu element and setting overflow: hidden to disable scrolling when menu is active but it didn't help. Also i tried to search about this but it's really hard for me to formulate accurate question with words to find some related answers or tips.
I figured out how actually position: fixed is working, and came up with idea how can i solve my issue. So basically, on touch devices position fixed is working only in one way(for example: if you set top: 0 and bottom: auto(or top: 0 and bottom: 0), there will be an empty space at bottom before menu hides, and if you set bottom: 0 and top: auto there will be opposite effect). So i came up with idea to create another layer with same bg-color and same animation effects but with bottom: 0 and top: auto for preventing this blank space on top/bottom side of the menu. So basically, yea, it did solve my issue. Maybe someone is facing same, so i decided to write down this answer.
thanks to #eisbehr for teaching me how to use this and a well learned lesson, I removed my previous answer.
body {
margin: 0;
}
.forceHeight {
position: relative;
height: 200vh;
background-color: lightgrey;
}
.menu {
position: fixed;
right: 0;
top: 0;
bottom: 0;
background-color: blue;
}
<div class="forceHeight">
<div class="menu">
this is your fixed menu
</div>
asdf this has a lot of content
</div>
Related
Currently, I'm working with on http://rccsite.wpengine.com/rcc-remediate/. The page has a slider that has text "Building across Auckland" and a "Read more" button.
I've spent more than an hour already trying to figure out why the nested div that has a class "slide-text" is not bringing the text and the link on the front. Currently the image with class "graphic-square" is on the front that has z-index of 1 it is needed to be on top on the image but not on the pieces of text of the slider.
I tried to add:
.slide-text {
z-index: 200;
position: absolute;
top: 30px;
right: 100px;
max-width: 190px;
}
Already made the z-index on 200 its not getting the desired output.
However, I successfully made the div tag on front, on the right that says "Building better".
Is there anyway to achieve this?
Why is the pager is working when z-index is applied but not on the slide text? I think, I'm missing something here.
Any help would be greatly appreciated.
The issue is just because of the below code:
<img src="http://rccsite.wpengine.com/wp-content/themes/genesis-child-jed/images/graphics-square.png" class="graphics-square">
.graphics-square {
display: block; /* Make it display: none; */
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
z-index: 1; /* Make it z-index: 0; */
}
Just hide the .graphics-square class and things will work OR you can set it's z-index: 0;
Try it at your end and let us know.
I already figured it out! I have to split the the graphics-square image in two parts. Removed the middle part of the image, allowing the text to be on front. And it worked.
Thanks for the idea Matt.
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
so i have this fiddle http://jsfiddle.net/speeedracer/CGucm/ and as you can see when you mouse over any of the links across the top row, the popup div is under the list elements of the bottom row. anyone know how to get it to cover over the other page content? i changed the z-index to be really high so it appears on top, but it didn't work.
here's the drop-down box code:
enter code here.drop-box {
display: none;
position: static;
width: 400px;
height: 100px;
z-index: 9999;
background: #e8dfc2;
}
*i know i have some visual spacing issues, but i just need a working mockup without it having to be perfect...yet.
thanks!
z-index does not work with position: static. This is as if you had no position.
So changing your position: absolute will solve your problem and z-index will come into play.
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.
I have problem with z-index again.
Please check page
http://webakery.asia/projects/valentine/
On the right side I have absolutely positioned picture with flowers, but they are overlaping navigation and eventually affect functionality of links in navigation. I want to hide those flowers behind navigation.
I have been playing around with z-indexes, but still cannot figure out the way. Can anyone help please?
Thanks
You have to change your z-index: 100 to z-index less than 50 (your navigation z-index) for section, e.g.
section {
margin: 0 auto;
position: relative;
text-align: left;
width: 960px;
z-index: 20;
}
and add position: relative to your nav
nav {
background: url("../images/bg-menu.png") repeat-x scroll 0 0 transparent;
min-height: 66px;
position: relative;
z-index: 50;
}
i think div.flowers should be outside of your tag
try this.. make the z-index on section -1 and look how everything goes behind your nav.
i think you should move div.flowers outside of your block and then assign its z-index independently. As is, you can change it all day, but the z-index that matters belongs to