- This topic has 1 reply, 2 voices, and was last updated 3 weeks, 4 days ago by
. This post has been viewed 134 times
Viewing 2 posts - 1 through 2 (of 2 total)
-
Posts
-
I’m attempting to use the header from the SEO 2 variation of the the template, along with a footer from a different variation of the template (smaller footer) that is sticky to the bottom of the screen. The only way I can get the footer to stay sticky to the bottom is to add “d-flex flex-column h-100” to the class of the body tag. However, when I do that, the shrink effect for the header no longer works. I assume that this is because the JavaScript can’t trigger the class change to the HTML and headers tags as needed because the h-100 is preventing it from detecting the scrolling. Is there a way to accomplish having both features (sticky footer with shrinking header)?
Template Version: Purchased: 2025-01-22Hello, thanks for your purchase.
Not sure if I understand it very wall, but my suggestion is that you create a custom class for the footer and add a css for it.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <!-- Basic --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo SEO 2 | Porto - Multipurpose Website Template</title> <meta name="keywords" content="WebSite Template" /> <meta name="description" content="Porto - Multipurpose Website Template"> <meta name="author" content="okler.net"> <!-- Favicon --> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> <link rel="apple-touch-icon" href="img/apple-touch-icon.png"> <!-- Mobile Metas --> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no"> <!-- Web Fonts --> <link id="googleFonts" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap" rel="stylesheet" type="text/css"> <!-- Vendor CSS --> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="vendor/animate/animate.compat.css"> <link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css"> <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css"> <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css"> <!-- Theme CSS --> <link rel="stylesheet" href="css/theme.css"> <link rel="stylesheet" href="css/theme-elements.css"> <link rel="stylesheet" href="css/theme-blog.css"> <link rel="stylesheet" href="css/theme-shop.css"> <!-- Demo CSS --> <link rel="stylesheet" href="css/demos/demo-seo-2.css"> <!-- Skin CSS --> <link id="skinCSS" rel="stylesheet" href="css/skins/skin-seo-2.css"> <!-- Theme Custom CSS --> <link rel="stylesheet" href="css/custom.css"> </head> <body> <div class="body"> <header id="header" class="header-transparent header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 70, 'stickyHeaderContainerHeight': 70}"> <div class="header-body border-top-0 appear-animation" data-appear-animation="fadeIn"> <div class="header-top"> <div class="container"> <div class="header-row"> <div class="header-column justify-content-start"> <div class="header-row"> <nav class="header-nav-top"> <ul class="nav nav-pills"> <li class="nav-item"> <span class="ws-nowrap custom-text-color-grey-1 text-2 ps-0"><i class="icon-envelope icons text-4 top-3 left-1 me-1"></i> <a href="mailto:[email protected]" class="text-color-default text-color-hover-primary">[email protected]</a></span> </li> <li class="nav-item d-none d-md-block"> <span class="ws-nowrap custom-text-color-grey-1 text-2"><i class="icon-clock icons text-4 top-3 left-1 me-1"></i> Mon - Sat 9:00am - 6:00pm / Sunday - CLOSED</span> </li> </ul> </nav> </div> </div> <div class="header-column justify-content-end"> <div class="header-row"> <ul class="header-social-icons social-icons social-icons-clean d-none d-lg-block me-3"> <li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a></li> <li class="social-icons-x"><a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a></li> <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li> </ul> <a href="tel:+1234567890" class="btn btn-tertiary font-weight-semibold text-3 px-4 custom-height-1 rounded-0 align-items-center d-none d-md-flex"> <i class="icon-phone icons text-4 me-2"></i> (800) 123-4567 </a> </div> </div> </div> </div> </div> <div class="header-container container"> <div class="header-row"> <div class="header-column"> <div class="header-row"> <div class="header-logo"> <a href="demo-seo-2.html"> <img alt="Porto" width="126" height="32" src="img/demos/seo-2/logo.png"> </a> </div> </div> </div> <div class="header-column justify-content-end"> <div class="header-row"> <div class="header-nav header-nav-links order-2 order-lg-1"> <div class="header-nav-main header-nav-main-square header-nav-main-effect-2 header-nav-main-sub-effect-1"> <nav class="collapse"> <ul class="nav nav-pills" id="mainNav"> <li> <a class="nav-link active" href="demo-seo-2.html"> Home </a> </li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="demo-seo-2-services.html"> Services </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="demo-seo-2-services.html">Overview</a> </li> <li> <a class="nav-link" href="demo-seo-2-services-detail.html">Seo Services</a> </li> <li> <a class="nav-link" href="demo-seo-2-services-detail.html">Email Marketing</a> </li> <li> <a class="nav-link" href="demo-seo-2-services-detail.html">Data Analysis</a> </li> <li> <a class="nav-link" href="demo-seo-2-services-detail.html">Digital Marketing</a> </li> <li> <a class="nav-link" href="demo-seo-2-services-detail.html">Social Media Marketing</a> </li> </ul> </li> <li> <a class="nav-link" href="demo-seo-2-blog.html"> Blog </a> </li> <li> <a class="nav-link" href="demo-seo-2-contact-us.html"> Contact Us </a> </li> </ul> </nav> </div> <button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav"> <i class="fas fa-bars"></i> </button> </div> <div class="header-nav-features header-nav-features-no-border header-nav-features-lg-show-border order-1 order-lg-2"> <div class="header-nav-feature header-nav-features-search d-inline-flex"> <a href="#" class="header-nav-features-toggle text-decoration-none" data-focus="headerSearch" aria-label="Search"><i class="fas fa-search header-nav-top-icon"></i></a> <div class="header-nav-features-dropdown" id="headerTopSearchDropdown"> <form role="search" action="page-search-results.html" method="get"> <div class="simple-search input-group"> <input class="form-control text-1" id="headerSearch" name="q" type="search" value="" placeholder="Search..."> <button class="btn" type="submit" aria-label="Search"> <i class="fas fa-search header-nav-top-icon"></i> </button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </header> <div role="main" class="main"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <footer id="footer" class="bg-color-quaternary position-relative mt-0 custom-footer"> <div class="footer-copyright bg-color-quaternary"> <div class="container py-2"> <hr class="bg-color-light opacity-1 mb-0"> <div class="row justify-content-center py-4"> <div class="col-auto"> <p class="text-color-light opacity-5 text-3">Porto SEO © Copyright 2025. All Rights Reserved.</p> </div> </div> </div> </div> </footer> </div> <!-- Vendor --> <script src="vendor/plugins/js/plugins.min.js"></script> <!-- Theme Base, Components and Settings --> <script src="js/theme.js"></script> <!-- Demo --> <script src="js/demos/demo-seo-2.js"></script> <!-- Theme Custom --> <script src="js/custom.js"></script> <!-- Theme Initialization Files --> <script src="js/theme.init.js"></script> </body> </html>CSS:
(css/custom.css)@media (min-width: 992px) { .custom-footer { position: fixed !important; bottom: 0; width: 100%; } }If the problem persists please share the HTML that you are using or send us the URL of your site.
Viewing 2 posts - 1 through 2 (of 2 total)
This topic is marked as "RESOLVED" and can not rceive new replies.
