Sticky Menu Not Working

[michaelm]

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

[Chinmoy Paul]

Provide your site URL please.

[Author]

Posts