• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Sticky Header Overlapping Existing Header

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sticky Header Overlapping Existing Header

This topic is: not resolved
  • This topic has 1 reply, 2 voices, and was last updated 5 years, 5 months ago by tarmadillo.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 10, 2017 at 11:06 pm #212399
    Cr4zyS4m
    Member

    Hello,

    I have been working on an issue with using a Sticky Header. I am using the base Genesis Framework (2.5.3) and building a Child Theme with Child Theme Configurator. I am also using their Responsive Menu plugin. The responsive menu works great on mobile devices and only appears at 767px width or smaller as it's supposed to. So naturally I wanted a Sticky Header to appear on larger screens as well but smaller than the existing header upon scroll. I came across the code below which worked great but would appear behind the responsive menu on mobile devices...
    CSS: `.agct_sticky {
    background-position: left;
    text-align: right;
    background-image: url(images/cropped-logo.png);
    background-repeat: no-repeat;
    display: none;
    position: fixed;
    top: 0;
    border-bottom: 1px solid #2489f5;
    background-color: #000;
    left: 0;
    right: 0;
    }`
    JS: `jQuery(function($){

    var $mainMenu = $('nav.nav-primary'),
    $stickyMenu = $('.agct_sticky');

    $(window).on('scroll', function() {
    var windowTop = $(this).scrollTop(); //get top of window
    var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height(); //bottom of main menu
    if( windowTop >= mainMenuBottom ) { //main Menu is no longer showing
    $stickyMenu.slideDown(); //show our sticky menu
    } else {
    $stickyMenu.slideUp(); //hide our sticky menu
    }
    });

    });`
    Functions: `//Sticky Header Desktop
    add_action('genesis_after_footer','agct_sticky_menu');

    function agct_sticky_menu(){
    wp_nav_menu( array(
    'container' => 'div',
    'container_class' => 'agct_sticky nav-primary',
    'menu_class' => 'genesis-nav-menu',
    'theme_location' => 'primary'
    ) );
    }

    //Call To js
    add_action( 'wp_enqueue_scripts', 'agct_sticky_load_scripts' );

    function agct_sticky_load_scripts(){
    wp_enqueue_script('sticky_menu', get_stylesheet_directory_uri() . '/js/sticky.js', array( 'jquery' ),'1.0.0',true);

    }`

    Added the following line to JS:
    if ( $(window).width() > 768) { //hide on size less than 768
    Now the JS is:

    jQuery(function($){
    
        var $mainMenu = $('nav.nav-primary'),
            $stickyMenu = $('.agct_sticky');
    
        $(window).on('scroll', function() {
            var windowTop = $(this).scrollTop();  //get top of window
            var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height();  //bottom of main menu
            if( windowTop >= mainMenuBottom );  //main Menu is no longer showing
    		if ( $(window).width() > 768) { //hide on size less than 768
                $stickyMenu.slideDown();  //show our sticky menu
            } else {
                $stickyMenu.slideUp();  //hide our sticky menu 
            }
        });
    
    }); 

    Now it only appears on screens 768px width or larger. Fantastic!

      But it won't disappear....

    Upon scrolling to the top of the page, the compressed sticky header is still there and it overlaps the existing Header/Menu at the top of the page. I feel like I am missing something or there is a simple adjustment that needs to be made and I'm not seeing it. Any assistance would be greatly appreciated, thanks in advance!

    http://betasite.inplainsight.ca
    October 11, 2017 at 2:14 pm #212434
    tarmadillo
    Participant

    I think you are missing some {}'s after if( windowTop >= mainMenuBottom )

    im not sure if you are trying to do this:

    jQuery(function($){
    
        var $mainMenu = $('nav.nav-primary'),
            $stickyMenu = $('.agct_sticky');
    
        $(window).on('scroll', function() {
            var windowTop = $(this).scrollTop();  //get top of window
            var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height();  //bottom of main menu
            
            if( windowTop >= mainMenuBottom ) {
                if ( $(window).width() > 768) { //hide on size less than 768
                    $stickyMenu.slideDown();  //show our sticky menu
                } else {
                    $stickyMenu.slideUp();  //hide our sticky menu 
                }
            }
        });
    }); 

    or this:

    jQuery(function($){
    
        var $mainMenu = $('nav.nav-primary'),
            $stickyMenu = $('.agct_sticky');
    
        $(window).on('scroll', function() {
            var windowTop = $(this).scrollTop();  //get top of window
            var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height();  //bottom of main menu
            
            if( windowTop >= mainMenuBottom ) {
                if ( $(window).width() > 768) { //hide on size less than 768
                    $stickyMenu.slideDown();  //show our sticky menu
                } 
            } else {
                $stickyMenu.slideUp();  //hide our sticky menu 
            }
        });
    }); 

    I think you want the second one


    https://armadillowebdesign.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble