Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1496009

    Hi,

    How can I accomplish an boxed layout with full width header, footer and socket?

    Best regards,

    Erwin

    #1496013

    Hey Erwin,
    The footer & socket are inside the main container, so you will need this JavaScript to move them after it:
    Add to your child theme functions.php file

    function move_footer_scoket_after_main() { ?>
      <script>
    document.addEventListener('DOMContentLoaded', function () {
      const main   = document.getElementById('main');
      const footer = document.getElementById('footer');
      const socket = document.getElementById('socket');
    
      if (!main || !footer || !socket) return;
    
      const parent = main.parentNode;
      parent.insertBefore(footer, main.nextSibling);
      parent.insertBefore(socket, footer.nextSibling);
    });
    </script>
      <?php
    }
    add_action( 'wp_footer', 'move_footer_scoket_after_main', 99 );

    Then add the css for the header, footer, & socket:

    .responsive.html_boxed.html_header_sticky #header,
    #footer, #footer .container, 
    #socket, #socket .container {
        width: 100vw;
        max-width: 100vw;
    		left: calc(-50vw + 50%); 
    }

    q1Jh6rl.md.png

    Best regards,
    Mike

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.