• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] Little problem with Sticky menu Navigation

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › Little problem with Sticky menu Navigation

Tagged: Sticky menu

  • This topic has 2 replies, 2 voices, and was last updated 5 years, 4 months ago by marcomac.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 15, 2015 at 12:44 pm #558
    marcomac
    Participant

    Hello,
    first of all, Flex Pro Theme is fantastic, the best theme I’ve bought since using Genesis Framework.

    I have a little problem with sticky menu that I have activated following this article: http://www.simpleprothemes.com/sticky-navigation-menu-flex-pro-theme/

    It works, but you see a “snap” very ugly looking. I tried to disable the script smoothscrolling.js, same problem.

    This anomaly occurs with all browsers on Mac, especially with Firefox sometimes you see a kind of “flash”.

    I made this short video where you see this “snap”: https://youtu.be/wj3D7FDPM2E

    Thanks for any help or suggestions.

    September 15, 2015 at 1:44 pm #559
    Chinmoy Paul
    Moderator

    Replace the old sticky nav javascript with this new one

    /* ===================================
       * Sticky Nav   
       * =================================== */
      var $header_bar = $site_header = $wpadminbar = 0;
      if( $('.site-top').length ) { $header_bar = $('.site-top').innerHeight(); }
      if( $('.site-header').length ) { $site_header = $('.site-header').innerHeight(); }
      if( $('#wpadminbar').length ) { $wpadminbar = $('#wpadminbar').innerHeight(); }
      $(window).scroll(function() {
        if ( $(window).scrollTop() > ( $site_header + $header_bar + $wpadminbar ) ) {
          
          $('body').addClass('sticky-nav');
          if( $('#wpadminbar').length ) { $('.site-navigation').css({'margin-top': $wpadminbar + 'px'}); }
          
          var nav_h = $('.site-navigation').innerHeight();        
          if( $('body').hasClass('home') && $('#home-top').length ) {
            $('#home-top').css({'margin-top': nav_h + 'px'});
          } else if( $('body').hasClass('home') && ( ! $('#home-top').length ) && $('#home-middle').length ) {
            $('#home-middle').css({'margin-top': nav_h + 'px'});
          } else {
            $('.site-inner').css({'margin-top': nav_h + 'px'});
          }
          
        } else {
        
          $('body').removeClass('sticky-nav');
          if( $('#wpadminbar').length ) { $('.site-navigation').removeAttr('style'); }
          
          if( $('body').hasClass('home') && $('#home-top').length ) {        
            $('#home-top').removeAttr('style');                              
          } else if( $('body').hasClass('home') && ( ! $('#home-top').length ) && $('#home-middle').length ) {        
            $('#home-middle').removeAttr('style');                                                                   
          } else {        
            $('.site-inner').removeAttr('style');
          }
          
        }
      });

    You would edit the global.js file only

    September 15, 2015 at 2:04 pm #560
    marcomac
    Participant

    Hi,
    great, now it works fine!
    Even with Firefox, the “flash” has disappeared

    Many thanks

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2021 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates