responsive navigation doesn't respond properly when you collapse window and then reopen

Hi,

If you gradually collapse the page, there are a number of issues.
1- the responsive navigation shows the menu button but only after it has shown a 'vertical version of the menu.
2- When it shows the menu button that squashes the logo and makes it tiny.
3- If you click to open the menu with a narrow screensize, it completely obscures the logo rather than appearing below it.
4- if you open the menu and then expand the page back to a wide viewport, the menu doesn't respond back to being the normal horizontal menu you started with, it statys vertical and kind of floats, obscuring part of the logo and header postbox image.

Can you advise how to resolve these issues.

Thanks,

Paul

    Kasia Swiderska

    Hello Paul,

    2- When it shows the menu button that squashes the logo and makes it tiny.

    This is correct - logo is quite big and it is resized to fit vertical space. Your logo is bigger that verical space in header and it is resized.

    3- If you click to open the menu with a narrow screensize, it completely obscures the logo rather than appearing below it.

    This is also correct - menu don't push down elements but creates layer above them - you can see that on demo site it looks exactly the same http://demo.upfront.pro/lukesara/

    the responsive navigation shows the menu button but only after it has shown a 'vertical version of the menu.

    if you open the menu and then expand the page back to a wide viewport, the menu doesn't respond back to being the normal horizontal menu you started with, it statys vertical and kind of floats, obscuring part of the logo and header postbox image.

    It should work now correctly - the same as on demo site. I had to save navigation styles as preset and that fixed the issue. This was issue related to update from older to newer version of the Upfront themes.

    kind regards,
    Kasia

    tofuwarrior

    Hi,
    Thanks for the reply and for sorting one of my problems,

    I was looking for guidance in finding solutions to the problems I identified rather than saying the theme was broken; the default behaviour does not look good, it damages the branding.....

    Obscuring the logo of thr site with the navigation is no good for us, it wipes out the branding on mobile, I need the menu to appear below the logo, how could I achieve this please.

    The squashing of the logo is also unhelpful, I need the menu trigger to appear below the logo so the logo has the full page width available on a narrow viewport. That is a pretty standard way to maintain the branding on mobile , can you advise me how best to do this with upfront please.

    Many thanks.

    Kasia Swiderska

    Hello Paul,

    I was looking for guidance in finding solutions to the problems I identified rather than saying the theme was broken; the default behaviour does not look good, it damages the branding

    I understand that you dont feel that this suits your brand, but I can assure you that theme is not broken.
    I've done some tests with your logo on my test site and you can in the responsive mode move element with burger menu to the bottom of the logo, so logo will fill space it has there. Please see screens:

    As for the menu under the logo - because this was not designed this way, then custom style have to be add:

    @media screen and (max-width: 1080px) {
    
        div.upfront-navigation div[data-style="burger"] ul#menu-luke-menu.menu {
    
            top: 142px !important;
        }
    
        }

    They should be add in the Editor in Custom CSS option. Please note, it will work only when you move navigation below logo in responsive mode.

    kind regards,
    Kasia