Submenus in mobile menu issue

Discussion in 'General Muse' started by spyder, Mar 18, 2016.

  1. spyder

    spyder Well-Known Member

    57
    1
    I am trying to figure out how to make the submenu buttons appear directly below their parent menu buttons at the low breakpoint in responsive Muse with the accordian widget. I just created my first responsive Muse site: www.spyderbaby.com. When viewed at the lowest breakpoint, you can see the submenus appear to the right when selecting 'Services' or 'Portfolio'. I would prefer it if they appeared below when selected, similar to this site: http://www.theneedle.ca/. In Muse I was having issues moving the submenu buttons around, and while testing on Chrome's Developer Tools, some devices would display the submenus well off the page, so I had to keep moving things around. I looked at the mobile widgets on Muse-Themes but there's no mention of submenus so not sure if any of those are the answer. If so that would be awesome.

    I'm actually about to redesign a client's site, I had a Drupal guy put that together for me awhile back but I'm about to completely redo it in Muse. The site is www.lgrmg.ca.. The mobile menu works in a way where the submenus appear already, below the main section and in a separate colour (and the menu is 100% width). This would be another great option.

    If you can help me out that would be great, thank you.
     
    Last edited: Mar 18, 2016
  2. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    Hey @spyder , I just threw this together very quickly in Muse but I believe this is what your trying to achieve? If so then I can export it and send you the file and you can adjust it as needed. All that I did was take a stock accordion widget, and then add my links into it, when I got to the "Services" tab, I created that as a separate accordion widget and then drug that into the "Menu".

    http://dropdownmenu.businesscatalyst.com/index.html
     
  3. spyder

    spyder Well-Known Member

    57
    1
    Yes, that works the way I was hoping for! I would just need to edit it, as you mentioned (style it). Couple quick things I noticed:
    - After selecting 'Services', the submenus buttons aren't clickable, and About Us and Contact Us aren't either. With the way I did the menus, they are clickable by default because I set those pages to be menu items. So I'm hoping that's not an issue.
    - I would like the menu items to be 100% width (I'd just use this menu for mobiles, so anything 480 pixels and under in responsive Muse). When I was resizing the browser window for your menu, when the window got smaller, some of the letters on the left disappeared and there was lots of empty space on the right. It would be great to know if the menu would fit mobiles 100% width without any spacing issues.

    Thanks so much, greatly appreciated!
     
  4. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    Hey @spyder , sorry for the late reply, I had to recreate the menu for you as I accidentally forgot to save the previous file lol. As for you question, those buttons aren't clickable yet because they are not linked to any pages, all you would need to do is link them like you normally would to there respected pages, as for the 100% width question, yes with the accordion widgets you should be able to make them full width. Below is the link to the widget I created, you can simply import it into Muse and start customizing! If there is any issues with the link or the file, please let me know!

    http://www92.zippyshare.com/v/1SdCTHTU/file.html
     
  5. spyder

    spyder Well-Known Member

    57
    1
    Hi, thank you for uploading the file, greatly appreciated! I apologize for my late reply as I took a bit of time off. I'll import that file into Muse over the weekend and check it out. Thanks again!!
     
  6. Enrique M

    Enrique M New Member

    1
    0
    Hi Norman,

    your widget seems very nice, however i think it has the same problems as all the accordion menus, when you click on any item the accordion is not closing so you need to do it manually. I read somewhere else that something like the code below might help with this "bug" but im not able to paste the code my self (i dont know how to), do you think you can help me ??

    Thanks a lot in advance,

    Enrique

    $(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
    $(this).collapse('hide');
    }
    });
     
  7. Tim Williams

    Tim Williams New Member

    1
    0
    Hello Norman, is it possible you could send me the drop down menu file?
     
  8. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    Hey @Tim Williams , Yes here is the stock accordion menu with sub menu's in the link below, it will look a little different from the previous demo above simply because I had to recreate it. However it will still function the same! Please note that I have not tested this widget in a responsive site so I can't say how it will perform in that setting.

    Download Link: https://www.dropbox.com/s/slbna6f0okcwn20/Accordion Menu wSubmenu.mulib?dl=0
     

Share This Page