Announcement

Collapse
No announcement yet.

Sticky Header Dropdown Menu is stuck

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Sticky Header Dropdown Menu is stuck

    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...
    Leslie Kirk
    Miva Merchant Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • Hi Leslie,

    Since it's a protected site, I would recommend contacting support so they can take a look at the coding.
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Thanks, Matt - I did.
      Leslie Kirk
      Miva Merchant Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • Has anyone successfully implemented the Sticky Header in Levels? I thought I had the "magic" fix but it broke the header menu...
        Leslie Kirk
        Miva Merchant Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment


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

          Leslie Kirk
          Miva Merchant Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


          • Hi Leslie,

            Did you contact support on this to have them look into the code?
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            Comment


            • Originally posted by Matt Zimmermann View Post
              Hi Leslie,

              Did you contact support on this to have them look into the code?
              Yes...
              Leslie Kirk
              Miva Merchant Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


              • 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


                Code:
                // ---- 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:

                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
                Leslie Kirk
                Miva Merchant Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                • Hi Leslie,

                  You should be able to tell if the menu is being updated if you see the change in the ID attribute.
                  Matt Zimmermann
                  Director of UI/UX Standards and Theme Development
                  / Miva, Inc.

                  Comment


                  • Originally posted by Matt Zimmermann View Post
                    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.
                    Leslie Kirk
                    Miva Merchant Certified Developer
                    Miva Merchant Specialist since 1997
                    Previously of Webs Your Way
                    (aka Leslie Nord leslienord)

                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment


                    • 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?
                      Code:
                      <div class="dropdown-menu-sticky-wrap"></div>
                      Matt Zimmermann
                      Director of UI/UX Standards and Theme Development
                      / Miva, Inc.

                      Comment


                      • 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.
                        Leslie Kirk
                        Miva Merchant Certified Developer
                        Miva Merchant Specialist since 1997
                        Previously of Webs Your Way
                        (aka Leslie Nord leslienord)

                        Email me: [email protected]
                        www.lesliekirk.com

                        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                        Comment


                        • I just discovered another issue with the Sticky Header. When searching for something, two autocomplete-results windows pop up...
                          Leslie Kirk
                          Miva Merchant Certified Developer
                          Miva Merchant Specialist since 1997
                          Previously of Webs Your Way
                          (aka Leslie Nord leslienord)

                          Email me: [email protected]
                          www.lesliekirk.com

                          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                          Comment


                          • 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.
                            Leslie Kirk
                            Miva Merchant Certified Developer
                            Miva Merchant Specialist since 1997
                            Previously of Webs Your Way
                            (aka Leslie Nord leslienord)

                            Email me: [email protected]
                            www.lesliekirk.com

                            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                            Comment

                            Working...
                            X

                            This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                            This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                            Accept