• 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

[Support request] Sticky Menu Not Working

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 › Sticky Menu Not Working

  • This topic has 1 reply, 2 voices, and was last updated 6 years ago by Chinmoy Paul.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 18, 2016 at 5:44 pm #1049
    michaelm
    Participant

    I’m trying to implement a sticky menu on my website with the Flex Pro Theme and I can’t get it to work.

    I read this article – http://www.simpleprothemes.com/sticky-navigation-menu-flex-pro-theme/ but still no luck.

    I updated stylesheet in proper place via wordress backend as well updated global.js file through my c-panel.

    I must be missing something and any help is helpful! 🙂

    Here is what I have in my Flex Pro Theme stylesheet. I placed it above the media queries section like the article said:

    /* Sticky Nav */
    .sticky-nav .site-navigation {
    background: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1140px;
    z-index: 999;
    }

    /* Remove Sticky Menu for Device */
    @media only screen and (max-width: 800px) {
    .sticky-nav .site-navigation {
    position: relative;
    top: auto;
    }
    }

    /* # Media Queries
    —————————————————————————————————- */
    @media only screen and (min-width: 801px) {
    .genesis-nav-menu .home a:before {
    content: “\f102”;
    display: block;
    font-family: “Dashicons”;
    font-size: 21px;
    left: 50%;
    margin-left: -14px;
    margin-top: -17px;
    position: absolute;
    top: 50%;
    }

    And, this is what I have for my global.js file in c-panel. I am editing the Flex Pro Theme js folder and the global.js file that is within that folder for context. 🙂 See below:

    jQuery(document).ready(function($){
    /* ===================================
    * Toggle Search Form
    * ==================================== */
    $(“.site-top .search-toggle, #nav-extras .search-toggle”).click(function(){

    if( $(this).hasClass(‘open’) ){
    $(this).addClass(‘active’);
    $(this).addClass(‘close’);
    $(this).removeClass(‘open’);
    }else{
    $(this).removeClass(‘active’);
    $(this).removeClass(‘close’);
    $(this).addClass(‘open’);
    }

    $(this).parent(“.widget-wrap”).children(“.search-box”).toggle(‘slow’);

    });

    $(‘.search-form input[type=search]’).data(‘holder’, $(‘.search-form input[type=search]’).attr(‘placeholder’));

    $(‘.search-form input[type=search]’).focusin(function () {
    $(this).attr(‘placeholder’, ”);
    });
    $(‘.search-form input[type=search]’).focusout(function () {
    $(this).attr(‘placeholder’, $(this).data(‘holder’));
    });

    /* ===================================
    * Go to Top
    * ==================================== */
    if ( $(‘.go_top’).length ) {
    $(window).scroll(function(){
    if ($(window).scrollTop() > 800) {
    $(‘.go_top’).show(‘slow’);
    } else {
    $(‘.go_top’).hide(‘slow’);
    }
    });

    //Click event to scroll to top
    $(‘.go_top’).click(function(){
    $(‘html, body’).animate({scrollTop : 0},800);
    });
    }

    /* ===================================
    * Responsive Menu
    * ==================================== */
    $( ‘.genesis-nav-menu’ ).addClass( ‘responsive-menu’ );
    $( “nav .sub-menu” ).before( “<button class=’sub-menu-toggle’ role=’button’></button>” );

    $( ‘.flex-mobile-menu’ ).click(function(){

    if( $(‘.dashicons-menu’).hasClass(‘open’) ){
    $(‘.dashicons-menu’).removeClass(‘open’).addClass(‘close’);
    $(‘.nav-primary’).addClass(‘nav-primary-open’);
    }else{
    $(‘.dashicons-menu’).removeClass(‘close’).addClass(‘open’);
    $(‘.nav-primary’).removeClass(‘nav-primary-open’);
    }

    $(‘.menu-primary’).slideToggle();

    });

    $(‘.sub-menu-toggle’).on( “click”, function() {
    var $this = jQuery( this );
    $this.toggleClass( “activated” );
    $this.next( “.sub-menu” ).slideToggle();
    });

    $( ‘.nav-secondary .genesis-nav-menu, .nav-header .genesis-nav-menu’ ).before(‘<div class=”responsive-menu-icon”><span>MENU</span></div>’);

    $( ‘.responsive-menu-icon’ ).click(function(){

    if( $(this).hasClass(‘close’) ){
    $(this).removeClass(‘close’);
    }else{
    $(this).addClass(‘close’);
    }

    $(this).next( ‘.nav-secondary .genesis-nav-menu, .nav-header .genesis-nav-menu’ ).slideToggle();
    });

    $( window ).resize(function(){
    if ( window.innerWidth > 800 ) {
    $( ‘.sub-menu,.genesis-nav-menu’ ).removeAttr( ‘style’ );
    $(‘.responsive-menu-icon, .dashicons-menu’).removeClass(‘close’);
    }
    });
    });

    /* ===================================
    * 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’);
    }

    }
    });

    /* ===================================
    * Flex Featured Posts Ajax Pagination
    * ==================================== */
    function flex_fp_ajax_pagination(paged, widget_id){

    sdata = JSON.parse( jQuery(‘#’+widget_id+’_data’).val() );
    sdata.paged = paged;
    sdata.widget_id = widget_id;

    var data = {
    “action” : “flex_featured_posts_ajax_nav”,
    “serialize_data” : sdata
    };

    jQuery( “#” + widget_id + ” .loading” ).toggle( “slow”, function() {
    jQuery( “#” + widget_id + ” .loading” ).css(‘top’, ( jQuery(“#” + widget_id ).offset().top – 45 ) )
    });

    jQuery.post(WP.AJAX_URL, data, function(data){
    jQuery(‘#’+widget_id+’ .flex-featured-posts’).fadeOut(500, function(){
    jQuery(this).html(data).fadeIn(500);
    jQuery( “#” + widget_id + ” .loading” ).toggle( “slow”);
    });
    });
    }

    function scrollingContent(widget_id){
    jQuery(“html, body”).delay(100).animate({scrollTop: ( jQuery(“#” + widget_id ).offset().top – 45 ) }, 200);
    }

    May 18, 2016 at 5:48 pm #1050
    Chinmoy Paul
    Moderator

    Provide your site URL please.

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

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