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
-
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.
Link to draft site
http://mivitral.comScroll down the page and try the test link Look a this link href=”#”
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 tovisible
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; }
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.
- The topic ‘footer template back-to-top’ is closed to new replies.