12 Replies Latest reply on Aug 15, 2017 3:58 PM by Günter Heißenbüttel

    Hamburger menu..

    riddlenz

      Hi

      I'm down to the last thing that needs real attention on my website and as I can't get the fonts to stay the same size on the lower end of the breakpoints, I have decided to do a Hamburger Menu which looks tidy.  However, I have encountered a number of issues:

       

      1.  The drop down menu works well when I click on the panel in the design mode.  However, when I place the Hamburger Icon on the Panel and review the menu in the browser, I can move the menu up and down easily if I click on the panel, but not when I click on the icon.  The 3 bars change into the X and back - and that's all.  How can I get this to link to the open and close action?  I've obviously missed something here although I think the instructions I have may date back to an earlier version of Muse.

       

      2.   I made the new menu with the Accordion Panel in a Master page which I thought was where it should be because that is where the navigation bars are set and changeable. Is this correct?

       

      3.  If so, I have a number of breakpoints on the Master Page and will need to make adjustments in each. I have hidden the 'old' menu bar where necessary, and hidden the 'new' menu bar on the wider pages.  When I review a Child Page which has this Master Page as its background, I don't see the new drop down menu if I reduce the width of the page right down.  Will this only show if I upload it to Businesscatalyst?

       

      Your help would be much appreciated! Thanks.

        • 1. Re: Hamburger menu..
          David Asch Adobe Community Professional

          For your first question: if you place an image over the panel, it will prevent the click going through to activate/deactivate the accordion.

           

          The best way I have found to get around this is to use the hamburger icon as a fill for the panel bar. I have written a tutorial on creating a hamburger menu you can read here. As an addition to the tutorial, you can change the fill to the close icon for the Active state of the accordion, so when the menu is open, it shows the close icon.

           

          There should be no problem with the menu on the Master page. That's where it should be set up. Make sure the new menu is set to the top-most object in the hierarchy, or create it on a new layer above the rest of the content.

           

          I hope this helps

           

          David

          Creative Muse

          • 2. Re: Hamburger menu..
            riddlenz Level 1

            Hi

             

            Thank you for your help.  It would seem that I am almost there.  I was using your tutorial as I worked my way through the menu but seemed to fall at Points 9 and 10 as the programme varies a little. However, I found the Fill through Windows and tried to add an Image.

             

            My icon is in the Download file and when I try to bring into into Muse via Add Image, it is very pale and doesn't respond.

             

            When I go into the Download file, where the icon is black, when I click on it, it automatically goes into the Library in Muse.  This is where I obtained the icon before, which is not correct.

             

            Can you throw further light on this? I'm sure once I master bringing the icon in through Add Image, I will be near to finishing.  Perhaps I should be using a different icon.  The one I have is Animated Burger.

             

            Thanks!

            • 3. Re: Hamburger menu..
              David Asch Adobe Community Professional

              I think it's the type of image you're using, it might be a specific type of animated file. I suggest using a standard svg, png or jpg image.

              • 4. Re: Hamburger menu..
                riddlenz Level 1

                Yes, You are correct about the animated file. I will have to abandon it and use the file type you suggest.

                 

                Many thanks for your help.

                • 5. Re: Hamburger menu..
                  riddlenz Level 1

                  Hi

                  I hope you don't mind me approaching you again on the problem of menus.  I have been struggling with the hamburger menu after having resorted to not using it - and then returning to have another try.

                   

                  I have followed your instructions, but there is another glitch which put me off using this method before, but now it is looking pretty good so I would like to persue it. I have the menu lettering centred across the screen, with the word Menu set above in the label. I have used non-animated icons and that part of it works well. 

                   

                  I am testing the site on an ipad and 2 sizes of iphones in portrait and landscape modes.  The menu works well on the ipad, (minimum size 768pxl), but on the phones (320x624pxl +/-), it doesn't work well for both way. The lettering either doesn’t show at all, or it is off-centre to the right.

                   

                  I am assuming this could be a problem for other screens up to 768pxl. I have tried various Resizing which makes no difference.  I don't know where to start looking at how I can fix this problem, although I've given it a good go. Can you give me any clues as I'm so near finishing now?

                   

                  Thanks!

                  • 6. Re: Hamburger menu..
                    David Asch Adobe Community Professional

                    Hi,

                     

                    Sorry, I didn't see your addition. I've replied to your PM.

                     

                    David

                    Creative Muse

                    • 7. Re: Hamburger menu..
                      Alpinerider

                      Hi David / Adobe Support

                       

                      I also trying to get some help on the hamburger / drop down menu. Ive uploaded the issue to the Business Catalyst site so you can see the issue:

                      http://httpwwwambruscouk01.businesscatalyst.com/

                       

                      The problem is when viewing the menu on a iPad or iPhone. If you depress the area above the menu (where the hamburger or cross svg can be loaded as a background icon in respective states) a grey rectangle appears as a fill.

                       

                      I have checked all the states settings and no solid fills or strokes are in any of the menu or header items where marked. Is this a glitch with in muse?

                      • 8. Re: Hamburger menu..
                        Günter Heißenbüttel Adobe Community Professional

                        Try to tap any browser button on any website on an iPad or iPhone and you'll see the same grey highlighting – what means: This is an iOS "feature", which you can't influence with Muse.

                        • 9. Re: Hamburger menu..
                          Alpinerider Level 1

                          Im not sure that's correct - if you go to a mobile site like myhermes.com, icons don't display a solid rectangular continuous grey bar when depressing a menu item? Furthermore, on other muse mobile sites, I've not seen this happen.

                           

                           

                          Any help to solve this would be much appreciated

                          • 10. Re: Hamburger menu..
                            Günter Heißenbüttel Adobe Community Professional

                            Maybe there are ways to circumvent this behaviour, but ir is a OS feature.

                            Look at this forum site, the Adobe sites in general, Apple's homepageor or thousands of of other sites …

                            Don't think, they are built in Muse!

                            • 11. Re: Hamburger menu..
                              Alpinerider Level 1

                              Ive somehow managed to correct the rectangle 'bar' that flashed upon the selection (where the text Loerm ipsu) normally appears to enable the drop down menu. Not quite sure what I did but believe it has something to do with when 'full page width' verses 'responsive' website is selected within the accordion widget.

                               

                              Either way it now appears fixed and was possible. How a more scientific approach to this can done though would be good to understand!

                               

                              Fixed result now republished here:

                              Home

                              • 12. Re: Hamburger menu..
                                Günter Heißenbüttel Adobe Community Professional

                                Can't see nothing at all on iPad (blank page).