Sticky Header Staying at Top of Page

  • Hi,
    Took over a site for a client and the old developers used “Industries” theme by Theme Kalia (not sure if that’s relevant or not) but the sticky header appears when you scroll down the page but when you go back to the top of the page, it stays at the top and covers the top menu and header.

    The theme customization options are very limited and I can’t even find where to turn off the sticky header. We deactivated all plugins to see if there was an issue there (including the Accessibility plugin) and nothing except there is one called “Theme Support” that when deactivated, it completely removes everything but the header/menu’s from the page. When I go into that plugin, that’s where some theme settings are but nothing about a sticky header.

    Any ideas?

    • This topic was modified 2 years, 9 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

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

  • Took over a site for a client and the old developers used “Industries” theme by Theme Kalia (not sure if that’s relevant or not)

    100% relevant, as the Sticky Header” is a feature of the theme (or any companion plugin installed by the theme).

    And this “Industries” theme is a commercial (ie paid) product. WordPress support volunteers are not given access to commercial products, so we’re unable to install this theme and help you fix the problem.

    You’ll need to contact the theme’s author for help.

    Please see: https://themeforest.net/item/industries-factory-company-and-industry-business-wordpress-theme/19169235/support

    Commercial products are not supported here.

    Good luck!

    Varshil

    (@varshil151189)

    Hi,

    You can achieve this by applying the below js:

    jQuery(window).on("scroll", function() {
        if(jQuery(window).scrollTop() < 50) {
            jQuery(".stricky").removeClass("stricky-fixed");
        }
});

    This will work as when you scroll down your menu sticks to the top and when your page reach to the top of the section your menu will again automatically adjust at its current position.

    Thread Starter 232creative

    (@232creative)

    Thanks @varshil151189 ! That worked…there is a small gap above the sticky menu but right now I can live with that compared to the alternative!

    • This reply was modified 2 years, 9 months ago by 232creative.
    • This reply was modified 2 years, 9 months ago by 232creative.
    Varshil

    (@varshil151189)

    Hi,
    To remove that gap you can make changes in the below css:

    FROM
    .mainmenu-wrapper.stricky-fixed {
    top: 32px;
    }

    TO

    .mainmenu-wrapper.stricky-fixed {
    top: 0;
    }

    • This reply was modified 2 years, 9 months ago by Varshil.
    • This reply was modified 2 years, 9 months ago by Varshil.

    You can easily create sticky or fixed header for your site and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
    Let’s take a look at the following example to understand how it basically works:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Implement Sticky Header and Footer with CSS</title>
<style>
    /* Add some padding on document's body to prevent the content
    to go underneath the header and footer */
    body{        
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 10px 0;
        color: #fff;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    nav a{
        color: #fff;
        text-decoration: none;
        padding: 7px 25px;
        display: inline-block;
    }
</style>
</head>
<body>
    <div class="fixed-header">
        <div class="container">
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Products</a>
                <a href="#">Services</a>
                <a href="#">Contact Us</a>
            </nav>
        </div>
    </div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>    
    <div class="fixed-footer">
        <div class="container">Copyright &copy; 2016 Your Company</div>        
    </div>
</body>
</html>
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Sticky Header Staying at Top of Page’ is closed to new replies.