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.
Related
I'm attempting to make this hamburger menu (visible when the page width is less than 865px) scroll to show whatever overflows the VH on screens not tall enough to display the whole menu at once. From my understanding by setting a fixed height to the dropdown section itself, something like calc(100vh - *header-strip-height*) combined with overflow-y: scroll; applied to #header_menus should work, however, because the #header_menus div is a child element of the top strip, and the top strip has a defined height, setting overflow-y: scroll; seems to force the dropdown segment to only take up the VH of the strip menu, and scrolls within the confines of the strip menu, instead of taking up the entire right side of the site, of all the solutions I've tried, I have yet to arrive at something that does not interfere with the placement of the body relative to the header, which is represented in the codepen by a placekitten image.
Looking for suggestions on how to allow the dropdown hamburger menu to scroll when it vertically overflows, without breaking the header layout in a way that interferes with the body in any way, ideas?
https://codepen.io/roomwillow/pen/BaWQoVJ
The issue caused by the fixed height set on your navigation.
In order to handle this you can set an absolute position on the menu,
when the viewport is under 865px.
As such:
#header_menus {
background-color: black;
padding-right: 1rem;
padding-left: 2rem;
overflow: auto;
position: absolute;
height: calc(100vh - 5.5rem);
top: 5.5rem;
right: 0;
}
Do make sure to add relative to the parent so it doesn't mess up the page:
#header_right_section {
position: relative;
}
This will make it work.
https://jsfiddle.net/5zjw1b6h/
I am setting a footer and I want it to be fixed at the bottom even if I am at the top of the page the footer is still visible
I tried using position: fixed , flex
But none of them worked
footer
{
margin-bottom:0px;
background-color: black;
background-color:rgb(11,132,69);
color: white;
}
<footer class="container-fluid text-center">
Some text
</footer>
you got to have a lot of content that is first of all scrollable and then give your footer div the following properties:
CSS
position: fixed;
left: 0;
bottom: 0;
One small note is that you got to have some content inside the footer HTML element in order for it to even render I provided the following text A Footer! (shown in the example below)
Other than giving a position: fixed you need to guide the div where to be fixed it. Its default is to be fixed top left I believe. So to have it fixed to the bottom you can add left: 0 and bottom: 0 to have it behave as you desire.
Code Playground Example
I made a small example for you to check out that is working feel free to play around here It looks like this and as you can see the scroll handle is midway through the scroll track marked in red while the footer is fixed to the bottom as you wanted it to.
Demo
One Small Note
position: fixed is what you desire. It will fix the divs position without being dependent on scroll event. position: sticky is a sort of combination of position: relative in default that in turn will shift to become position: fixed when you scroll down enough and the div will then be fixed.
- position: sticky is currently experimental and not supported in IE.
You can set footer fixed to bottom of the page no matter how much content is available in your page. The footer will remain at the bottom of your browser window by using below given css code.
footer {
position: fixed;
bottom: 0;
}
I have an HTML page with
html,body{ height: 100%; }
But I have more content in the page than it can fit at 100%, so there is a vertical scroll bar. This is fine, but right before </body> I have a <footer>Some text</footer>. My problem is, the footer appears in the middle of the screen even though it's supposed to be showing at the very bottom of the page. I checked, there is no margin applied to any element that would push the footer that high up in the body.
What's weird to me is, when I use the Chrome Developer tools to inspect the page it shows the area covered by the body not to be the 100% of the scrollable area. This area is 100% of the page if there was no scroll bar.
I can't provide the markup, it's a legacy ASP.Net application and it's messy.
Try min-height: 100% instead. On html and body. Also it appears footer is absolutely positioned, but min-height should fix this.
If it doesnt afterwards then apply padding-bottom to body and increase it until footer is where you want it.
It depends a bit on how you want to solve this. If you know the page will always be shorter than the content you could move the footer down to the bottom with:
footer {
position: absolute;
bottom: 0;
}
Alternatively this is a task for flexbox (provided you can drop old browsers). Something like this should do the trick:
body {
display: flex;
flex-direction: column;
}
.main {
flex-grow: 1;
}
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.