footer template back-to-top

  • Hi All,

    I know I’m diving into dangerous waters but survived so far. I am creating child theme templates for Landing Pages. The purpose is to add a new selector (mylanding-page) into my child theme so I can customize all landing pages with a single selector instead of using the page-id-nnn approach.

    1) I created header-mylanding-page.php as a copy of header.php and changed line
    <body <?php body_class(); ?>>
    to
    <body <?php body_class( 'mylanding-page'); ?>>.

    2) Created mylanding-page.php as a copy of page.php and edited it as follows:

    <?php /* Template Name: mylanding-page */ ?>
<?php get_header('mylanding-page'); ?>
<?php hu_get_content('tmpl/page-tmpl'); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

    Everything works OK except for the back-to-top arrow in footer.

    Theme footer.php template manages this with the following code:

    <a id="back-to-top" href="#"><i class="fa fa-angle-down"></i></a>

    I guess there is some simple issue with the page id when customizing templates but I don’t know what is it and how to fix it. Please help!

    Cheers,
    Darío

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi Dario,
    the back to top link is a standard link that points always to #
    Doing so, regardless the page, template, id, that link will always scroll to the top of any page.

    As usual would be easier to debug having a live link to refer to.

    Thread Starter Darío Orlando Fernández

    (@soykatorce)

    Link to draft site
    https://mivitral.com

    Thread Starter Darío Orlando Fernández

    (@soykatorce)

    Scroll down the page and try the test link Look a this link href=”#”

    Thread Starter Darío Orlando Fernández

    (@soykatorce)

    I found the reason. Selector mylanding-page is used to change page sections layout through css:

    /* Force page height to viewport height */
    /* add scroll bar if necessary */
    .mylanding-page #wrapper {
    height: 100vh;
    overflow: scroll; /* Seems this is the cause */
    }
    /* Eliminate header */
    .mylanding-page #header {
    height: 0;
    padding-bottom: 0;
    }
    /* Modify page margins and paddings */
    .mylanding-page #page {
    margin-top: 0;
    padding-bottom: 0;
    }
    /* Make page container inner transparent */
    .mylanding-page #page .container-inner {
    background-color: transparent;
    box-shadow: none;
    }
    /* Make main transparent */
    .mylanding-page .main {
    background-color: transparent!important;
    }
    /* Eliminate page title */
    .mylanding-page .page-title {
    display: none;
    }
    /* On laptops and desktops, fix footer to page bottom */
    @media screen and (min-width: 720px) {
    .mylanding-page #footer {
    position: absolute;
    bottom: 0;
    }
    }

    You started the tread with the back-to-the-top link issue,
    then you moved to those pages 100vh, which BTW can be solve like:
    id="bloque1" background-color: red; height: 100vh;
    and
    id="bloque2" background-color: blue; height: 100vh; padding-top: 0px;

    then the overflow for these pages should be set to visible in case the content is higher than the screen height!

    the sticky footer can be easily handled by the Hueman theme customizer, there is no need to re-invent the wheel, it has already been implemented, but your custom css should be like

    #footer {
    position: fixed;
    bottom: 0;
}
    Thread Starter Darío Orlando Fernández

    (@soykatorce)

    Hi Giorgio, thanks for your rapid response.

    Leaving overflow to its default value, setting the blocks height to 100vh and fixing footer to bottom solved all problems, including the back-to-top issue. Will set this topic to solved.

    BTW: I can’t find where the sticky footer has been implemented in Hueman theme customizer.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘footer template back-to-top’ is closed to new replies.