Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sticky footer – Digital Pro Theme
Tagged: digital pro
- This topic has 1 reply, 2 voices, and was last updated 7 years, 4 months ago by Victor Font.
-
AuthorPosts
-
November 30, 2016 at 3:26 am #196810Toon61Member
Hi all,
I want the footer in the digital pro theme to be sticky.
This means that when I have a page with very little content, I want the footer to 'move' to the bottom of the browser window.
Currently, this is not available/possible with the Digital Pro Theme.
I tried a lot of different scenarios but none of these seem to be working.
I already placed the footer-widgets area in the site-footer area so I have all footer related items in one enclosing div, like so:remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' ); add_action( 'genesis_footer', 'genesis_footer_widget_areas', 9 );
I also added an empty DIV with class 'push' at the end in the 'site-inner' div to try the solution as described at this link.
But again, this didn't help.
Does anyone have a solution on how to get the footer stick at the bottom of the browser window when there is very little content.November 30, 2016 at 8:43 am #196820Victor FontModeratorIf I'm understanding you correctly, you want to move the footer to the bottom of a mobile device's screen when there isn't enough content to fill the screen. Is that correct?
Think about how a browser displays a HTML page. If there's not enough content, the end of the page will display where the code ends, even if that is not enough to fill a screen. This is just the way browsers work. It has nothing to do with the theme or the size of the screen. If you want to always move a footer to the bottom of the screen, you have to adjust the length of the page to fit the screen with jQuery.
There are three dimensions you'll need to consider:
- screen.height will give you the height of the screen.
- $(window).height() will give you the browser viewport height
- $(document).height() provides the page length
So basically, you would have to write code that checks the height of the screen. If the document length is greater than or equal to the screen height, do nothing. However, if the document length is less than the screen height, you need to calculate a height adjustment. The tricky part is that the viewport height and document height are fixed values and cannot be adjusted. Therefore, you have to adjust the height of an element within the DOM to move the footer down. You could perhaps change the top margin of the widget area, or the height of a div. You'll have to figure that part out. I've never been asked to write code like this before, so this is theoretical at this point, but it's the approach I would take if this was a problem I was asked to solve. Maybe someone else has a better idea.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.