Menu icon on mobile not displaying properly on Upfront theme

I’m editing the Panino theme and I'm confused about responsive because it seems like the changes I'm making in mobile are carried over to the desktop and I thought the whole point was to adjust it for mobile.

I changed the menu, not the menu but the display of the menu, and it changed on both mobile and desktop. I’ve set the menu icon to be placed on the right on mobile view (which is what I see when I’m on the Upfront Editor) but on the frontend the icon is not correctly displayed. On my iPhone, the menu icon is halfway off the screen below the logo on the left, not on the right on the same line.

The menu icon should be placed on the right on mobile and on the same line with the logo, which should be smaller. In fact, it should be almost the same as desktop. Just with the click for menu hidden, which is what I selected and I also changed the icon (it should be a square icon on mobile). It looks right on the editor, but wrong on the frontend on phone (or when resizing the browser on desktop).

Last night it was perfectly spaced, and looked great on my phone. Now it's all screwed up
and I haven't even touched it. I edited the main view, and extended the logo, and I think that's why this is messed up now.

  • Predrag Dubajic

    Hi Mary,

    Hope you're well.

    I was checking your site and I'm afraid that I can't see the issue you are having, have you managed to fix this in the meantime?
    I can see that the editor is now the same as the frontend, and this is how it looks for me on iPhone and Android phones:

    Am I perhaps missing something here?

    Also, when you're changing your elements in responsive mode try using different presets, so that you have one menu preset for large screens and one for mobile devices.

    Best regards,

  • mary

    HI Predrag, thanks for taking a look. The issue isn't exactly fixed, but I'm approaching things differently. I was actually doing just as you say, setting different presets; if you look at the "appearance" options under menu, one of them is "mobile trigger," which was what I had set for the mobile option. However, selecting it for mobile in responsive mode also changed it on the desktop, which Violeta, your colleague who worked with me on this extensively, can verify. Every change I made in responsive to the mobile version created change in the default version.

    The last time I created a responsive version of a site, on a different builder, I did it by manipulating, deleting, and adjusting sections of the website in responsive mode. But when I tried that with the Upfront editor, the desktop version changed, too, so perhaps that's not how it's meant to be used? At any rate, what I ended up doing is I created separate versions for mobile and then hid them for desktop, and that seems to work OK. I haven't dealt with the menu issue yet. My hope is that since it will be an entirely different menu - since the section triggers will no longer be the same now that I've created separate mobile versions - it won't become the same type of problem. But for now, I have just selected the same menu on both for the purpose of figuring out the menu placement, which is why you're seeing the same thing on both. If you have any insight into any of this I'd love to hear it.

  • Predrag Dubajic

    Hi Mary,

    I was chatting with the devs about this and there seem to be some issues with responsive changes on certain installations and they are working on a fix for the next Upfront release.

    I was able to get a patch from them that should fix this issue.
    Can you go to wp-content/theme/upfront/build/ folder and in there rename main-1.9.4.js to main-1.9.4.js.backup.

    After that download the attached file, unzip it and place the file inside the above mentioned folder.

    Let us know if your changes are properly saved after that.

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.