Menu in mobile browser

[skaalyk]

Hey Andrii,

One other thing I’m having issues with – when viewing new.capitallendingsolutions.com on a mobile browser. The menu is behaving strangely, where it compresses and the logo size changes, but it distorts the background and the rest of the website.

I noticed on the kanso demo page that the ‘kanso’ logo in the menu, and the entire menu itself, stay stagnant when viewed on a mobile browser.

Any thoughts on this?

Thanks so much for the help!

[satori]

Hey Kjael,

the website looks like this on my Android device: screenshot. Could you please clarify where the problem is or send a screenshot from your smartphone, indicating also the browser you are using. Thanks!

Sincerely,
Andrii / Satori Studio

[skaalyk]

Do you see the blank area above the menu? That area is taken up by the whole menu when I view the Kanso demo site from my mobile browser. Also, scroll down slowly and you’ll notice the logo compresses, causing the whole page to shift (mostly the background image…)

[satori]

Hey Kjael,

could you please tell me if the Kanso demo behaves the same as you’ve described on you mobile device, and also which browser you are using (and which smartphone model you have, just in case) – I’d need that data for further testing. Thanks!

Sincerely,
Andrii / Satori Studio

[skaalyk]

The Kanso Demo behaves differently, where there is no blank area above the menu (like in the screenshot from your post above) and the ‘Kanso’ logo does not compress when you scroll down. I am using google chrome from an iphone 5S.

[satori]

Hey Kjael,

I have two “candidates” for this problem, and since I cannot seem to replicate the bug myself, I will need to ask to to try them: first, instead of BOTH instances of this CSS you’ve added to the “custom-styles.php” file:

#logo img { max-width: 250px; }

try adding this:

#logo img { width: 250px; height: 116px; }

And refresh the website in your mobile browser. If this does not work, please try removing line 25 from the theme’s main “functions.php” file (while keeping the previous change); the line you need to remove should say the following:

wp_enqueue_script('retina');

Please let me know if any of the above helps resolve the issue!

Sincerely,
Andrii / Satori Studio

[skaalyk]

That unfortunately didn’t do the trick. I switched everything back, but let me know if you’d like me to revert during future attempts to resolve.

If you view new.capitallendingsolutions.com from your desktop browser and slowly make the browser narrower, you’ll notice the menu adjust itself – creating a transparent space above the menu – before it changes to the mobile accordion style menu a little bit after when the browser is as narrow as it goes.

I don’t so much mind the blank space above the menu, but it looks like that’s just part of the problem caused by the functionality where the menu expands and contracts staying active on mobile, which causes the whole background image to adjust, disrupting the website like a glitch.

Also, it just dawned on me that a feature you added in the past may be the cause, here’s that link – https://satoristudio.net/forums/topic/menu-links-to-other-pages-in-one-page-mode/#post-2711

[satori]

Hey Kjael,

it is difficult for me to propose a meaningful course of actions at the moment because I still cannot seem to be able to replicate the issue on my machine; could I ask you to make a screenshot of the issue you’re describing in your last message (i.e. the menu/background behaving improperly), and tell me which browser is being concerned (as far as I understood now we’re talking about a desktop browser)? Thank you!

Sincerely,
Andrii / Satori Studio

[skaalyk]

If you look at the screen shot you included from your post on April 8th, you can see it. A transparent area above the menu, vs. fixed white block like the kanso demo displays.

I only mentioned viewing on a desktop browser because if you minimize the window and slowly narrow the browser, you can see that at a certain width (not sure the #px, but about half the maximized screen size) the menu breaks before turning to the mobile, accordion style menu…

[satori]

Hey Kjael,

I’ve made another screenshot, showing both the website and Kanso demo side-to-side: as far as I understood, you are talking about the area above the mobile menu? I’ve marked the respective area with red arrows on the screenshots, they are present in both Kanso and the website.

Regarding your last remarks – could you please clarify what you mean by saying “the menu breaks”? By design, the right-aligned full-width menu should become left-aligned and move under the logo from 1030px in width to 767px, before it collapses to the mobile menu; this is done to ensure that there’s place for all menu items on the shrinking screen width so that the menu does not become two-layered. The mobile menu should indeed move the lower part of the website down as it opens, this is how it was intended to be on mobile screens.

My apologies for the lengthy discussion, but I want to make sure I understand your concerns before proposing fixes ;)

Sincerely,
Andrii / Satori Studio

[Author]

Posts