Menu on scroll

Hi,

i've got a question. Is it possible to change the menu behaviour to make it visible after scroll down even when i am on the header image? (like creativity theme, for example)

Thanks for help

Hi,

Please check this solution: https://www.gavick.com/forums/simplicit ... 30#p126552

Hi,

thanks for the response. With the portion of code you mentioned, the menu doesn't show at all, even after the header!

Nevermind, i've found how to resolve this.

But i've got another question: is it possible to add divider lines between menu elements or a sort o grid?

Thanks

Hi, could you share the solution? It may be helpful fo other users.

Regarding the divider/grid - it's unfortunately not possibe, but in the first level of the menu you can add i.e. border or pseudoelements:before, but probably it's not that what you want..

I've changed the portion

Code: Select all

if (jQuery(window).scrollTop() > headerHeight && !jQuery('#gk-menu-wrap').hasClass('active')) {

                //document.id('gkHeaderNav').inject(document.id('gkMenuWrap'), 'inside');

                jQuery('#gk-menu-wrap').append(jQuery('#gk-header-nav'));

                jQuery('#gk-head').attr('class', 'gk-no-menu');

                // hide

                jQuery('#gk-menu-wrap').attr('class', 'active');

            }

            //

            if (jQuery(window).scrollTop() <= headerHeight && jQuery('#gk-menu-wrap').hasClass('active')) {

                jQuery('#gk-head > div').first().css('display', 'block');

                jQuery('#gk-head > div').first().prepend(jQuery('#gk-header-nav'));

                jQuery('#gk-head').attr('class', '');

                jQuery('#gk-menu-wrap').attr('class', '');

to

Code: Select all

// if menu is not displayed now

            if (jQuery(window).scrollTop() > 50 && !jQuery('#gk-menu-wrap').hasClass('active')) {

                //document.id('gkHeaderNav').inject(document.id('gkMenuWrap'), 'inside');

                jQuery('#gk-menu-wrap').append(jQuery('#gk-header-nav'));

                jQuery('#gk-head').attr('class', 'gk-no-menu');

                // hide

                jQuery('#gk-menu-wrap').attr('class', 'active');

            }

            //

            if (jQuery(window).scrollTop() <= 50 && jQuery('#gk-menu-wrap').hasClass('active')) {

                jQuery('#gk-head > div').first().css('display', 'block');

                jQuery('#gk-head > div').first().prepend(jQuery('#gk-header-nav'));

                jQuery('#gk-head').attr('class', '');

                jQuery('#gk-menu-wrap').attr('class', '');