Announcement

Collapse
No announcement yet.

Suivant navigation problem with lots of categories

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

    Suivant navigation problem with lots of categories

    Hi folks,

    I'm working on a store using the Suivant theme, and we've run into a problem with the navigation Sets. This store has lots of categories and sub-cats; the navigation menus are too tall to fit on the screen. But they don't scroll properly with the rest of the page. Sometimes they don't scroll at all; other times they scroll part-way, but then suddenly snap back to the top. It seems to depend on where the page is positioned at the time when you hover over the bar and drop the menu down.

    Has anyone else seen this? Is there a fix? I'm using Firefox, but the client has confirmed seeing this in Chrome.

    Thanks --
    Kent Multer
    Magic Metal Productions
    http://TheMagicM.com
    * Web developer/designer
    * E-commerce and Miva
    * Author, The Official Miva Web Scripting Book -- available on-line:
    http://www.amazon.com/exec/obidos/IS...icmetalproducA

    #2
    Re: Suivant navigation problem with lots of categories

    most of it seems to be in the structure.css file
    Mark Hood
    Vermont Gear

    Comment


      #3
      Re: Suivant navigation problem with lots of categories

      Hi Kent,

      Mark is correct that the CSS which handles the navigation bar in contained in the structure.css file. As for the snapping, that is probably due to the sticky header built into the ReadyTheme. You can remove that function if you want. It is near the beginning of the scripts.js file.
      Matt Zimmermann

      Miva Web Developer
      Alchemy Web Development
      https://www.alchemywebdev.com
      Site Development - Maintenance - Consultation

      Miva Certified Developer
      Miva Professional Developer

      https://www.dev4web.net | Twitter

      Comment


        #4
        Re: Suivant navigation problem with lots of categories

        Cool, thanks for the quick reply!
        Kent Multer
        Magic Metal Productions
        http://TheMagicM.com
        * Web developer/designer
        * E-commerce and Miva
        * Author, The Official Miva Web Scripting Book -- available on-line:
        http://www.amazon.com/exec/obidos/IS...icmetalproducA

        Comment


          #5
          Re: Suivant navigation problem with lots of categories

          Hi folks,

          I'm continuing to work on this store with lots of categories, and we've run into another problem with navigation. With the sticky header turned off, it's now possible to scroll to the bottom of a long menu -- but only if you have a mouse with a scrolling wheel. Many people don't have, or don't use, these. That means they have to move the mouse away from the menu to scroll, but when they do that, the menu disappears. Is there a way to make the menus more persistent, so that once they appear, they stay there until the user clicks something?

          Thanks --
          Kent Multer
          Magic Metal Productions
          http://TheMagicM.com
          * Web developer/designer
          * E-commerce and Miva
          * Author, The Official Miva Web Scripting Book -- available on-line:
          http://www.amazon.com/exec/obidos/IS...icmetalproducA

          Comment


            #6
            Re: Suivant navigation problem with lots of categories

            You could probably add auto scroll jQuery widget to it...but yea, that should be in there already...
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


              #7
              Re: Suivant navigation problem with lots of categories

              Hi Kent,

              The built-in menu uses CSS to control the show/hide function. You could remove that from the structure.css file and create a JavaScript function within scripts.js which would fire on a click event of the top level of navigation.
              Matt Zimmermann

              Miva Web Developer
              Alchemy Web Development
              https://www.alchemywebdev.com
              Site Development - Maintenance - Consultation

              Miva Certified Developer
              Miva Professional Developer

              https://www.dev4web.net | Twitter

              Comment


                #8
                Re: Suivant navigation problem with lots of categories

                Hi Matt, I took a look at structure.css, and made some changes; but I'm not real expert on the more advanced things that have been added to CSS in recent years. Can you give me a few more specifics about the CSS that controls the show/hide functionality?

                Thanks --
                Kent Multer
                Magic Metal Productions
                http://TheMagicM.com
                * Web developer/designer
                * E-commerce and Miva
                * Author, The Official Miva Web Scripting Book -- available on-line:
                http://www.amazon.com/exec/obidos/IS...icmetalproducA

                Comment


                  #9
                  Re: Suivant navigation problem with lots of categories

                  If you're mega menu is that large, your problem goes beyond the usability of it. You should never, never include a mega menu that would require the user to have to scroll to see the fully dropped down menu. Fixing the usability quirks you mention are only a band-aid for a much larger problem. I'd consider an alternative to having all of those categories worked into the drop down and maybe drop down to only 2 or 3 levels of links in the global header, and allow for further selection from whatever parent they click whether it be a 1st, 2nd or 3rd level parent w/ subcats.
                  Ted Hust
                  AarcMediaGroup.com

                  Celebrating 13 Years of Outstanding Service & Support
                  Miva Merchant Design

                  Comment


                    #10
                    Re: Suivant navigation problem with lots of categories

                    @Kent - If you look in the structure.css file, you will see the code for the navigation bar starting at about line 241. Below that, around line 305, you will see the code that controls the first level of the drop-down. That is set as display:none and is transitioned into display:block when the parent is hovered at line 318.

                    @Ted - Excellent point and recommendation. We often look at optimization of categories prior to implementing a complex navigation structure.
                    Matt Zimmermann

                    Miva Web Developer
                    Alchemy Web Development
                    https://www.alchemywebdev.com
                    Site Development - Maintenance - Consultation

                    Miva Certified Developer
                    Miva Professional Developer

                    https://www.dev4web.net | Twitter

                    Comment

                    Working...
                    X