• 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

2 issues adding sticky menu to Essence Pro

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 › 2 issues adding sticky menu to Essence Pro

This topic is: not resolved

Tagged: essence, navigation, sticky menu

  • This topic has 4 replies, 2 voices, and was last updated 4 years, 5 months ago by GeneW.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 12, 2018 at 9:33 pm #222415
    GeneW
    Participant

    Hello,

    I'm testing Essence Pro and have added a sticky menu, but with 2 problems.

    The first problem I'm having is the sticky menu is appearing as soon as the page loads, and then disappears when I scroll, then appears as it should once I scroll past the regular menu.

    Second, the scrolling sticky is stuck behind every element on the page like widgets or the text on a post.

    The site is a dev clone for testing and is password protected to prevent getting hit for duplicate content, but I can easily provide a password for viewing if needed.

    I sure appreciate any help with this.

    Here is what I have so far:
    functions.php

    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'
     ) );
    }
    
    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);
    
    }

    css

    .agct_sticky {
    	display: none;
    	position: fixed;
    	top: 0;
    	left:0;
    	right:0;
    	background:#7f7f7f;
      background:rgba(0,0,0,0.5);
    }

    sticky.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
            }
        });
    
    });

    Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

    August 13, 2018 at 4:17 am #222423
    Victor Font
    Moderator

    You've got a lot of code for just adding a sticky menu. All you have to do is add position: fixed in CSS. The other code probably isn't necessary.

    With sticky menus, you have to set the z-index value in CSS. The z-index is the front-to-back layer value. The higher the value, the more further forward the element.

    As for the scroll issue, this is controlled by jQuery. There's nothing in the Essence Pro jQuery that causes this, so the code you added has the slideup() and slidedown() functions that are causing the problem for you.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    August 13, 2018 at 10:15 am #222442
    GeneW
    Participant

    Thank you very much, Victor!

    I deleted the js, removed what I added to functions.php, and went with this in CSS:

    .agct_sticky {
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	background:#000000;
    	
    }
    div {
      z-index: 1; /* integer */
    }

    It does work in customization under additional CSS, but when I publish it's not working live in the browser.

    If I could get it to work, I would like to change that background to white, but I can't find a way to use CSS to change the font color on scroll, even after searching all morning. Is that possible to do?


    Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

    August 13, 2018 at 11:10 am #222452
    Victor Font
    Moderator

    Adding a z-index to div won't work because you are applying it globally to every div on the page. You have to target the menu element only.

    Provide a link to the site so someone can help you. We have to view the live CSS.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    August 13, 2018 at 1:00 pm #222455
    GeneW
    Participant

    Funny thing, I logged back in and now that CSS I last shared isn't working at all.

    The site is https://dev.genewhitehead.com and the credentials to view is devguest with a password of devguest1.

    The widgets are a mess, but it's a theme I've just started with yesterday! 🙂


    Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 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