If you take a look at: http://www.bendemeerwoolshed.co.nz
I have a fixed header. All fine there, however, if you reduce the width of the window (or look at it zoomed in on a mobile device) and need to scroll on the X axis, only the content scrolls. Is there a way to set position: fixed for just the Y axis?
Here is the CSS for the header:
header#header {
position: fixed;
height: 188px;
background: #fff url(../images/headerbgstrip.png) bottom center no-repeat;
width: 100%;
}
Taken care of with a simple piece of jQuery:
$('#header').css("left","-"+$(window).scrollLeft()+"px");
As a side note, I attached the header to the content in mobile devices as the static header was occupying too much real estate in mobile browsers anyway.
Related
This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.
My footer is not sticking on the bottom of my page. It only goes until the bottom of my screen, but when I scroll down, the footer is stuck on the location where my bottom of screen was. It sticks on the bottom of my screen but not on the bottom of my entire page. Someone please help I almost tried everything. The body and html doesn't take up the size of my whole page too, only the size of my screen which is 1920 x 1080. I tried every sizes like 100vh, 100%, min-width, set the footer div to absolute with bottom: 0, and none of them works :( (I'm also a newbie)
One time I managed to make the body fill the whole page but the footer is still stuck in the position.
Try to set body to:
position: relative (so the footer sets it's absolute position according to the bodys position)
You might even need to do:
body {
min-height: 100vh //as you have already
position: relative;
padding-bottom: 150px //same height as you footer
}
Most simple way to achive it is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.
Give the footer-container a negative margin-top:
footer-container {
clear: both;
position: relative;
height: 150px;
margin-top: -150px;
}
I want to extend my div through the whole page of the web browser. When I scroll to the right side of the page. The div style cuts off.
.div3{
background-image: url('images.jpeg');
background-repeat: repeat-x;
background-attachment: scroll;
}
The expected output should show the web page with div style extending to the right.
expected output
You could try to put the div behind and in a fixed position:
-The other things in a z-index greater than the div's (ex. div in z-index: 0 and other z-index: 1).
-Then put the div with these css styles:
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
Since you said the whole page I used vw and vh to specify the size, but if it's not the whole page you would have to change a bunch of things:
-Like put the size in % of the parent div.
-The position different (the div position, because I think that fixed works as absolute but that doesn't move with scrolls).
I want to display my footer at the bottom of the page, relative to the content area. So it should adapt if my browser is smaller or larger, up until where the content area stops.
I tried to follow this link but I can't seem to get it to work on my website.
I added the PUSH div at the bottom of my content area
I set the correct heights and adjustments in the css
My footer is still displayed half way on my screen and also messes up the titles. The guys that sold me the Wordpress theme are reluctant to help me ...
If anyone could guide me in the right direction that would be a great help!
I think this could do what you want:
body {
padding-bottom: 50px;
/* Set a padding-botton equivalent
to the height of your footer
this is for preventing the
footer to be covered because
of its z-index
*/
}
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: -999;
}
Hope it works ;)
Add the following code to your css:
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}
The footer will be always on the bottom.
Ok so the issue here is this, you can stick the item to the bottom as #Dzhambazov suggested either with position:absolute or position: fixed it is going to stay in place at the bottom even if that is halfway up your content.
So you can go with other alternates like: How do you get the footer to stay at the bottom of a Web page?
Mentioned in the comments, but this is not going to be as easy with a prebuilt theme as you will be fighting with the theme dev's structure.
What you could do as a fix to make it more bearable is to increase the minimum height of the content so that it "fakes" the footer further down, this has its draw backs and could mean that your footer is off the bottom of the view port, but if it is irritating you to that level. you could try.
#content {
min-height: 200px;
/* forces the content block to take up space */
}
hope that helps other wise stick the footer to the bottom as mentiones and have it always display, but note that may trash mobile so you will want to remove the positioning via a media query for phones etc.
this is the most stupid question here on stackoverflow...
My client would like to have always visibile sidebar in all pages of his website..
Some pages have scrolling, other no, so he see logo and element jump position from one page to another of the scrollbar width ...
so... there is a way to "lock" the scrollbar space, so the he don't see "jump" form one page to another?
thank you
html {
overflow-y: scroll;
}
forces the scrollbar to be shown always
use fixed position:
#sidebar {
position: fixed;
top: 10px;
left: 10px;
}
With the above, the container div will always stay 10 pixels from the top and left of the browser window. So when the page scrolls, it will not move.