1

So I have a website that has a hamburger menu on mobile.

The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.

I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.

I have Gifs of the problem. I will also provide a URL if needed.

Heres the first gif

  1. https://gfycat.com/GiftedPlaintiveEgret

So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.

Here is the second gif

  1. https://gfycat.com/EasyIllustriousBlackbear

In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.

And finally the third gif

  1. https://gfycat.com/ContentRepentantBeetle

This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.

I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.

Has anyone else ever had an issue like this?

EDIT Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this https://gfycat.com/BouncyFlakyGlobefish

When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.

onTheInternet
  • 6,421
  • 10
  • 41
  • 74
  • Without seeing any code, it's unlikely that anyone can just guess the error. My guess: use `100vw` instead of `100%`. – C14L Jun 02 '16 at 17:24
  • @C14L http://inspirafs.com/Home I can provide just about anything needed. – onTheInternet Jun 02 '16 at 17:25
  • Seems to be working for me. What browser version is seeing this issue? – roydukkey Jun 06 '16 at 13:21
  • Yep, working correctly for me on latest release build of Chrome. Edit: Scrap that, it's working correctly in the browser, but phone emulation is breaking it. Have you tried it on a device, it could be a bug in the emulator. – DBS Jun 06 '16 at 13:22
  • Hi roydukkey & @DBS All mobile devices I have tested on (Galaxy S6 and Iphone 5 & 6) are seeing these issues. So I've used mobile chrome and the default internet explorer for android and safari on iphones. All have the same issue. The hamburger loads outside the viewport and users dont see it when page is loaded. – onTheInternet Jun 06 '16 at 13:27
  • 1
    @onTheInternet Having refreshed it a couple of times, it looks like the animation on the white section somehow breaks the hamburger menu until a reflow occurs. It feels nasty, but manually triggering a reflow after the animation is complete would solve your problem. – DBS Jun 06 '16 at 13:32
  • @DBS You sir are correct. After removing the animation from the H1 element the hamburger menu is positioned perfectly. If you make your comment into an answer I'll be happy to award you the bounty. Even better if you have a suggestion for how to manually trigger a reflow. – onTheInternet Jun 06 '16 at 14:41

2 Answers2

0

The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.

A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)

If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)

Various re-flow options available here

Community
  • 1
  • 1
DBS
  • 9,110
  • 4
  • 35
  • 53
-2

It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.

If not, make the media queries and don't use the margin-left:auto for the smaller screen size?

Frostidas Noman
  • 16
  • 4