Sticky Header Dropdown Menu is stuck

[lesliekirk]

I'm trying to implement the Sticky Header in Levels. When I click on the hamburger menu in the sticky header the drop down menu is behind the sticky menu like it's stuck to the default menu position. If you scroll farther down the page you can't even see the menu (assuming it is displaying).

Yeah, it behind a moat so I can't share it...

[Matt Zimmermann]

Hi Leslie,

Since it's a protected site, I would recommend contacting support so they can take a look at the coding.

[lesliekirk]

Thanks, Matt - I did.

[lesliekirk]

Has anyone successfully implemented the Sticky Header in Levels? I thought I had the "magic" fix but it broke the header menu...

[lesliekirk]

Is there any other sort of sticky header I can use for Levels?

[Matt Zimmermann]

Hi Leslie,

Did you contact support on this to have them look into the code?

[lesliekirk]

Hi Leslie,

Did you contact support on this to have them look into the code?

Yes...

[lesliekirk]

From what I can tell when you click on the "js-sticky-dropdown-button" button it triggers the same menu used for the header. In triggering that same menu, it is also located in the same position as it. I'm wondering if a second menu needs to be created to use for the Sticky Header? If so, how would it be called since it looks like all the javascript is calling the navigation_all-categories

// ---- Sticky ---- //
            function stickyHeader() {
                // Main Header & Stick Header
                var jsHeader = $('#js-header'),
                    stickyNav = $('#js-sticky-header'),
                    jsHHeight = $(jsHeader).height(),
                    sNHeight = $(stickyNav).height(),
                    jsMain = $('main');
                // Copying of the Logo & dropdown menu
                var allCategoriesNav = $('#js-all-categories-nav').clone();
                $(allCategoriesNav).attr('id', 'js-sticky-categories-nav');

                $('#js-sticky-dropdown-button .dropdown-menu-sticky-wrap').html( allCategoriesNav );
                $(window).scroll(function () {
                    if ( $(this).scrollTop() >= jsHHeight) {
                        $(stickyNav).addClass('slideDownSticky');
                        $(jsHeader).addClass('sticky-shown');
                        $(jsMain).addClass('sticky-is-shown');
                    } else if ( $(stickyNav).hasClass('slideDownSticky') ) {
                        $(stickyNav).removeClass('slideDownSticky');
                        $(jsHeader).removeClass('sticky-shown');
                        $(jsMain).removeClass('sticky-is-shown');
                    }
                });
            }
            stickyHeader();

This is just a part of the Sticky Header code:

<div id="js-sticky-header" class="sticky-header">
        <div class="wrap">
            <div class="row">
                <div id="js-sticky-dropdown-button" class="large-one-twelfth column">
                    <div class="button sticky"></div>
                    <div class="dropdown-menu-sticky-wrap"></div>
                </div>

When I do a view source and try to watch the behavior of the drop-down menu, I swear it looks like the active menu is the one for the header and not the one being cloned by the javascript.

Yeah, I know, it's really difficult to look at something that is behind a locked door

[Matt Zimmermann]

Hi Leslie,

You should be able to tell if the menu is being updated if you see the change in the ID attribute.

[lesliekirk]

Hi Leslie,

You should be able to tell if the menu is being updated if you see the change in the ID attribute.

I'm not sure I quite follow you on that one. Do you mean the "data-navigationitem-id=" number? Should it be different for the category in the sticky header, versus the one header nav bar?

My method may be a little off, what I'm doing is using the Chrome Developers Tools. I scroll down just far enough to activate the Sticky Header, then click the button for the menu (which of course is still behind the sticky header). I then inspect one of the links. I'm being taken to the id="js-main-header" nav id="js-navigation-bar". Mousing "on" results in "display: block", mousing off "display: none". I scroll further down in the inspector to find sticky header related div - it is exhibiting the same behavior. I only see one menu and it's the one that is appearing behind the sticky header and acts like it belongs to the header.

[Matt Zimmermann]

Hi Leslie,

The navigation should be cloned, the ID of the clone should be changes, and the navigation should be inserted into this element. Are you seeing this on your site?

<div class="dropdown-menu-sticky-wrap"></div>

[lesliekirk]

Yes, I'm seeing a clone of the menu inserted into id="js-sticky-categories-nav".

If I scroll the page back up, while I still have the drop down menu active - it is the one from the header that I am viewing. It doesn't try to change or close.

[lesliekirk]

I just discovered another issue with the Sticky Header. When searching for something, two autocomplete-results windows pop up...

[lesliekirk]

Shout out to Martin at Miva Support - we finally go a sticky header implemented, but had to use code other than what comes with the Levels ReadyTheme.

[lesliekirk]

I'm trying to implement the Sticky Header in Levels. When I click on the hamburger menu in the sticky header the drop down menu is behind the sticky menu like it's stuck to the default menu position. If you scroll farther down the page you can't even see the menu (assuming it is displaying).

FYI - this is still a problem. This time the site is live. Not sure how long I'll leave the code in place (I'm going back through my emails from support for the code that was used on the site that got fixed). But you can see it here.