Twenty Thirteen
Footer margin-top for child theme (4 posts)

  1. Tusker-Machine
    Posted 2 years ago #

    I have custom child theme with reduced header height and margins and paddings changed all over the places.

    Now everything works well except one thing....

    Sidebar is responsive and goes way below the footer bottom if content on the page is bit less. Having lot of widgets in the sidebar.

    You can see the screenshot here:


    I have learned that it is adjusted via js/functions.js file in the theme folder.


    	 * Adds a top margin to the footer if the sidebar widget area is higher
    	 * than the rest of the page, to help the footer always visually clear
    	 * the sidebar.
    	$( function() {
    		if ( body.is( '.sidebar' ) ) {
    			var sidebar   = $( '#secondary .widget-area' ),
    			    secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(),
    			    margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;
    			if ( margin > 0 && _window.innerWidth() > 999 )
    				$( '#colophon' ).css( 'margin-top', margin + 'px' );
    	} );

    Now I tried to changed it via this js code but it doesn't work. Any Ideas how to solve this for customized child themes?

  2. Tusker-Machine
    Posted 2 years ago #

    one more thing, it is dynamically generated via functions.js file but can we override it using CSS ?

  3. designpromote
    Posted 1 year ago #

    You can use external css (not inline css).
    for example:

    .site-footer {
    	margin-top: 15px !important;
  4. Tusker-Machine
    Posted 1 year ago #

    I think sometime back I solved it somehow, but don't remember how :D

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic