Mobile Menu - Full Width

The mobile menu drop down menu seems to be set to appear only on a portion of the left hand side of the screen. However, it is set to appear at the top.

Also, there does not appear to be any way of distinguishing Top Level Pages from Sub-Top Level Pages in the mobile menu. How can I do that?

  • James Morris

    Hello sparkymarky,

    I hope you are well today.

    I wasn't able to replicate your issue with the menu not displaying full page on my own install. I checked your site and it seems to be displaying full width on yours as well. Is there a particular device you're seeing this symptom on?

    However, I do see what you mean by the submenu items. Fortunately, Upfront makes it very easy to adjust the CSS for such items.

    In the following screenshot, you will see I've clicked the edit gear for the menu and clicked the option to Edit Preset CSS. From there, I clicked Responsive Sub Menu Item and added a little custom CSS to distinguish the submenu items a little more clearly.

    See screenshot: https://goo.gl/5UJ3o1

    The CSS I used is:

    [data-style='burger'] ul.sub-menu > li.menu-item > a{
        max-width: none;
        background:#555;
    }

    I hope this clarifies a bit.

    Best regards,

    James Morris