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