Fixed menu behaviour

Is it possible to get the Quark fixed menu to remain on screen permanently and not just appearing when scrolling up? I'd basically like the menu to behave exactly like it does in the John theme (i.e. not showing over the header, but on scrolling down it appears and then remains visible unless you scroll back up to the header). Many thanks for your help.

Hi,

You have to change script responsible for the menu, please edit Quark/js/functions.js file and change this fragment:

Code: Select all

function menu_scroll() {
            var new_scroll_value = $(window).scrollTop() >= 0 ? $(window).scrollTop() : 0;   
            var local_diff = new_scroll_value - prev_scroll_value;
            var current = parseInt($(page_nav).css('top'));
            var h = header.outerHeight() < 150 ? 150 : header.outerHeight();
           
            if(new_scroll_value >= h) {
                if(
                    !$(page_nav).hasClass('gk-fixed-nav')
                ) {
                    $(page_nav).addClass('gk-fixed-nav');
                    $(page_nav).css('top', '-150px');
                    current = -150;
                }
           
                if(new_scroll_value >= prev_scroll_value) {
                    $(page_nav).css('top', (current - local_diff >= -150 ? current - local_diff : -150) + "px");
                } else {
                    if($('body').hasClass('admin-bar')) {
                         $(page_nav).css('top', (current - local_diff <= -20 ? current - local_diff : -20) + "px");
                    } else {
                        $(page_nav).css('top', (current - local_diff <= -45 ? current - local_diff : -45) + "px");
                    }
                }
            } else {
                if($(page_nav).hasClass('gk-fixed-nav')) {
                    $(page_nav).removeClass('gk-fixed-nav');
                    $(page_nav).css('top', 0);
                }
            }
           
            prev_scroll_value = new_scroll_value;
        }


into:

Code: Select all

function menu_scroll() {
            var new_scroll_value = $(window).scrollTop() >= 0 ? $(window).scrollTop() : 0;   
            var local_diff = new_scroll_value - prev_scroll_value;
            var current = parseInt($(page_nav).css('top'));
            var h = header.outerHeight() < 150 ? 150 : header.outerHeight();
           
            if(new_scroll_value >= h) {
                if(
                    !$(page_nav).hasClass('gk-fixed-nav')
                ) {
                    $(page_nav).addClass('gk-fixed-nav');
                    $(page_nav).css('top', '-20px');
                   
                }
           
               
            } else {
                if($(page_nav).hasClass('gk-fixed-nav')) {
                    $(page_nav).removeClass('gk-fixed-nav');
                    $(page_nav).css('top', 0);
                }
            }
           
            prev_scroll_value = new_scroll_value;
        }


That worked perfectly - many thanks!

Hello Piotr,

Is it possible to help me with something similar to this, to have the fixed menu always present inclusive with the header?

Thanks in advance,
Bruno

Could you show me your website? because I'm not sure how it should look.

Sure, here it is:

http://www.webfuncional.com.br/pousadadoscorais/

Kind regards,
Bruno

Try to change the previous fragment:

Code: Select all

function menu_scroll() {
            var new_scroll_value = $(window).scrollTop() >= 0 ? $(window).scrollTop() : 0;   
            var local_diff = new_scroll_value - prev_scroll_value;
            var current = parseInt($(page_nav).css('top'));
            var h = header.outerHeight() < 150 ? 150 : header.outerHeight();
           
            if(new_scroll_value >= h) {
                if(
                    !$(page_nav).hasClass('gk-fixed-nav')
                ) {
                    $(page_nav).addClass('gk-fixed-nav');
                    $(page_nav).css('top', '-150px');
                    current = -150;

                    // Logo switching
                    if(image_logo_exists && dark_logo_img) {
                        logo_img.attr('src', dark_logo_img);
                    }
                }
           
                if(new_scroll_value >= prev_scroll_value) {
                    $(page_nav).css('top', (current - local_diff >= -150 ? current - local_diff : -150) + "px");
                } else {
                    if($('body').hasClass('admin-bar')) {
                         $(page_nav).css('top', (current - local_diff <= -20 ? current - local_diff : -20) + "px");
                    } else {
                        $(page_nav).css('top', (current - local_diff <= -45 ? current - local_diff : -45) + "px");
                    }
                }
            } else {
                if($(page_nav).hasClass('gk-fixed-nav')) {
                    $(page_nav).removeClass('gk-fixed-nav');
                    $(page_nav).css('top', 0);

                    // Logo switching
                    if(image_logo_exists) {
                        if(dark_logo_img && dark_bg_class) {
                            logo_img.attr('src', dark_logo_img);
                        } else {
                            logo_img.attr('src', light_logo_img);
                        }
                    }
                }
            }
           
            prev_scroll_value = new_scroll_value;
        }

        $(window).scroll(menu_scroll);


to:

Code: Select all

function menu_scroll() {
            var new_scroll_value = $(window).scrollTop() >= 0 ? $(window).scrollTop() : 0;   
            var local_diff = new_scroll_value - prev_scroll_value;
            var current = parseInt($(page_nav).css('top'));
           

                if(
                    !$(page_nav).hasClass('gk-fixed-nav')
                ) {
                    $(page_nav).addClass('gk-fixed-nav');
                    $(page_nav).css('top', '-20px');
                   
                } 
           
            prev_scroll_value = new_scroll_value;
        }

        $(document).ready(menu_scroll);