Scribe - Positioning of 2nd level submenus AND display of submenus in responsive mode.

I am running into two submenu related problems.

First - 2nd level submenus are positioned directly over the top of their parent menu item which prevents users from clicking on the parent (1st level submenu) item. I am unable to identify the correct css elements via firebug to modify the positioning.

Second - Submenus are not active and do not display in responsive mode. How to enable these submenus?

Thanks!

  • Adam Czajczyk

    Hello Scott,

    I hope you're well today and thank you for you question!

    The 2nd-level sub-menu could be moved a bit to the right and it would "uncover" the main sub-menu, thus making it usable. According to my tests on your site, this CSS rule should help here:

    .sub-menu {left:100%!important;}

    As for responsive view sub-menus.

    This is by default single-level as adding multiple levels would most likely post some serious CSS/usability issues here. The idea is to use different menu for "desktop" and different for responsive views.

    To make it so, please first create a new menu via your dashboard (that would include all the necessary links in a "single level" but do not assign it to any position. Then please switch your Upfront editor to "responsive" mode and double-click on "hamburger menu" icon.

    There'll be a small green "gear" toolbox icon right around menu icon. Use it and then select the new menu from the "LOAD DIFFERENT MENU" option drop-down list. This should assign that new menu to the responsive menu.

    I hope that helps!

    Best regards,
    Adam

  • scott_wood

    @Adam Czajczyk - Thank you very much for your rapid response. While the "left" css element works somewhat, it is much more desirable to reposition only the 2nd level sub-menu. As it is now, left: 100% moves the submenu further to the right. In the case of menus items at the right of the page, this pushes the 2nd level sub-menu right off of the page.

    So, to compensate, I set the element to "left: -50px" so that it will move the menus to the left and not the right. This is also a balancing act, though, because it can also cause navigation problems by making it just a little bit more difficult to scroll down and keep the submenu active - particularly if the submenu is too far to the right. It might seem trivial - but there are cases where this can be a problem.

    In the end, how can I move the 2nd level submenu only. If I can just drop it 20 or 30px, then my problems or solved.

    As far as the burger menu in responsive mode goes. I understand the concept behind "not" allowing the sub-menus to be displayed - but why on earth would the developer take that decision out of the hands of the website and person integrating the theme?

  • Adam Czajczyk

    Hello Scott,

    Thank you for your response!

    As for 2nd-level sub -menu.

    I'm sorry I didn't noticed that the 1st-level submenu get's moved also, I guess I was too much in hurry. Of course you're right but fortunately this can be adjusted as well. Here's an example:

    .sub-menu {left:100%!important;margin-left:-120px!important;}

    Default values for "left" and "margin-left" are (accordingly) "50%" and "-90px". By changing these values you can tweak position of both 1st- and 2nd level sub-menus. The rule is: the bigger the "left" value (it can easily go over 100%), the more negative value for "margin-left". For example:

    50% - 90px
    100% - 120px
    150% - 220px etc

    That's not a "scheme", just a "rule" so please feel free to experiment with these values.

    As far as the burger menu in responsive mode goes. I understand the concept behind "not" allowing the sub-menus to be displayed - but why on earth would the developer take that decision out of the hands of the website and person integrating the theme?

    I guess the question could be asked regarding many different aspect of various themes, not only ours That said, if you wish to stick to "original" menu (regardless whether it's using a "burger icon" or not - I'm referring to the menu structure itself) it should be doable though it will need some additional CSS styling. I cannot guarantee effects upfront but if you need help with styling I can give it a shot, just let me know please.

    Best regards,
    Adam

  • scott_wood

    That works to move the 2nd level sub-menu to the right. I tweaked the settings to move it to the left for the primary menu item (containing a submenu) that was furthest right in the horizontal primary nav menu (the third link), but the submenu and 2nd level sub-menu for the FIRST menu item was so far off that I couldn't hover over the primary menu item to activate the submenu display and then hover over it to keep it active.

    Frankly, I've abandoned this attempt and will have to identify a nav alternative. If I didn't have so much time invested at this point, I think I'd likely go to a different theme and framework.

    Appreciate your response and support @Adam Czajczyk