I am trying to create a footer with bootstrap 3. In the end it should look like on this site.
I have already tried this example but it is static and does not move with the site.
It is static because there is no content to push the footer down, there's no scrollbar. That footer on the bootstrap site should work fine. I added a height 3000px to their h1 and the footer moved with the site.
Unless I'm confused and you don't want a sticky footer in which case this should work fine
.footer {
width: 100%; /* or whatever */
float: left; /* to clear it */
}
or
.footer {
width: 100%;
clear: both; /* to clear it */
}
Also be sure to add .container inside your footer div, then add your content inside the .container div. You content should then move 'with the site'
Bootstrap 3 doesn't have a set way of adding a footer, so go crazy. The only custom footer I can see from them is the sticky footer
I think you are confusing what a sticky footer is. A sticky footer is a footer that stays at the bottom of the content even at the bottom of the page when you don't have enough content to fill the page. It keeps the site looking neat and consistent.
What you are looking for is the position attribute. Set up the following class in your CSS
.fixed-to-bottom{
position:absolute;
bottom:0px;
left:0px;
}
add this class to the element you want to always show at the bottom of the screen.
I hope this helps.
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 site has a sticky header (position: fixed), which I understand from other posts takes the header out of the main flow and can be rectified with extra padding to the body. However in this case it doesn't work. No matter where I add the padding the main content Header and part of the Para are lost behind the fixed header.
This is only on the homepage and on screens smaller than 692px.
http://www.mindfulnessperth.com.au
All other pages are fine!
I assume you have idea of responsive web development and working with media queries?
If yes, then proceed with these changes in your custom.css on your wordpress.
.home .site-header {top:0}
#media (max-width:693px) {
body {padding-top:150px} /* adjust it manually,depending upon ur browser width using media queries */
}
I simple pushed down the next Element after the position: fixed header.
#media (max-width:693px) {
.site-inner {
margin-top: 250px;
}
}
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.
I want to achieve this example but with the difference that in case there is too much content on my page (between navbar and footer) that this content is down-scaled / squeezed to fit inside (i.e. so that the footer is still visible at all screen resolutions, making it a "fixed footer" in CSS jargon). I'm using bootstrap 3.1.1 and it would be cool if anyone has a solution that is bootstrap-friendly :). Best!
You could always go with a fixed footer and have any additional content scroll underneath it.
Heres a jsfiddle as an example:
html {
min-height: 100%;
position: relative;
}
body {
margin-bottom: 1.5rem /* or whatever your fixed footer height is */
}
/* and assuming your footer has id="footer" */
#footer {
position: fixed;
bottom: 0;
height: 1.5rem;
overflow: hidden;
}
Please see this answer here, and the example it refers to here. It's going to be a bit different I assume if you've got pictures and everything though. If you could provide an example of your content on jsFiddle we could probably help you scale it a little better.
I am trying to achieve a website layout that works like this: http://tzd-themes.com/gebo_admin/index.php?uid=1&page=dashboard.
And I would like to add a footer.
The way the footer would work is the following: when you scroll to the end of the page, there is a footer that take all the width of the page, and pushing the sidebar up if it needs to, causing the sidebar to shrink. So essentially what I am tryng to do is specify the height of the sidebar as being the distance bewteen the bottom of the header and the top of the footer, with overflow: auto;.
You can fiddle here (with more explanations):
http://jsfiddle.net/xK4B5/
Have a header, main section, and footer, the main section will contains the content and the side bar. Set the sidebars height to 100% (if that doesn't work for whatever reason, position it absolute - left:0,top:0,bottom:0,right:auto) this will cause it to take up however much space your main content is height wise. So if your content is short (causing the footer to come up) the sidebar will also shorten.
#sidebar {
position:absolute;
left:0;
top:0;
bottom:0;
right:auto;
width: 200px;
}
#content {
margin-left: 200px;
width: 700px;
}
Should get you close to your desired effect.