Start a new topic

Hamburger icon jumps when clicked on

My customized hamburger menu shifts diagonally a bit when the menu is opened. I'm not sure why this is happening size the customizations implement a 0 value for both vertical and horizontal transformations:


/*Hamburger Icon, Remove Transformation to X*/

.frontApp .MainMenu .hamburger.open .bar1, .frontApp .MainMenu .hamburger.open .bar2, .frontApp .MainMenu .hamburger.open .bar3 {

    -webkit-transform: rotate(0deg) translate(0px,0px);

    transform: rotate(0deg) translate(0px,0px);

    opacity: 100;

}


Does anyone have any suggestions? Thanks!


Hello,


Sorry, I didn't fully understand. Please correct me if I'm wrong, do you mean that the mobile menu is moving a bit when you open the navigation? If yes, I added a simple code to fix it. Please refresh your browser and check the site again. 



Arvin (Forum Moderator) 

Thanks, Arvin! Yes, that's what I meant. The hamburger was shifting diagonally. Your code worked on the vertical side, and I was able to add to it to work on the horizontal side as well. 


For some reason, the fix doesn't take effect when the screen is much wider (for example, when I turn my phone to landscape), but it's just one of many things that doesn't scale up/down correctly. Another issue for another time.


For others who may have the same issue:

@media only screen and (max-width: 999px){

 .frontApp .MainMenu .hamburger.open{

  top: 0 !important;

  right: 0.81em !important;

 }

}


Thanks again!

Hello,


I'm glad to hear that you are happy with the fix :) 


By the way, I edited the code to fix the new issue you mentioned. Please refresh your mobile browser and check it again. Let me know if the problem with wider screen is fixed for mobile. 


I hope this helps! Have a good day! 



Arvin (Forum Moderator)

Hi Arvin,


Thanks for looking into this. Actually, I think the additional code has maybe exacerbated the issue. Options at the bottom of the menu are now no longer visible on landscape/wider screen view, and the menu icon shifting persists for wider screens and has returned for portrait/narrower screens. Also, the menu bar has widened considerably. 


I think this responsive design issue might be slightly bigger than just the menu though, since I've noticed the font in some sections on the About page scales up differently than the font in other sections on the same page, though they are both set using the point-and-click method, not css. So this might be a topic for a different, more involved thread, which I can start and post pictures for if you feel you have the bandwidth to look into it now - let me know. I don't want to swamp you :)


In any case, the solution you gave earlier works well for the portrait/normal phone size, which is what most people would see. Thank you!!

Hello, 


No worries! Sorry for missing the wider screens. I added CSS code again, hope it fix it this time :) 


As for the fonts, it might be because you are using a different font style on your about page. You can give me more information about it and I'll try to check if I can do anything to it. Again, I can't guarantee anything but I'll try my best to help. 



Arvin (Forum Moderator) 


Thank you, Arvin! Yes, it is working now on both wider and narrower screens, no shifting happening. :D But the menu bar (height 5em) is much taller than before (it was around 2em). I tried to play around to shrink it back to 2 em, but that causes issues with opening the menu. Does this responsive fix require the menu bar to be taller?


With the font on the About page, it's actually not the custom font that is causing issues. It's the Times New Roman. I set all the Times New Roman on the page to be 1.11 em using the Font options (point-and-click), but the top section shows up as much bigger on wider mobile screens than the bottom section (pic attached). There must be some other option that's causing this collateral damage but I can't figure it out.


Thanks!!

Hello,


Yes, I'm sorry it will require the menu to be a bit wider to fix the other problem.

I agree, there's a lot of CSS customization added to your site already so there might be a line of code that messing with the font size of that specific text. However, I still can't replicate it on my end. It seems to be okay and have the same font size on my end. Can you try clearing the cache of your mobile browser and check your site again? 



Have a great weekend!

 

Arvin (Forum Moderator)

Ah, I see. Interesting. I cleared the cache a couple of times and it's still happening. I've tried two different phones on landscape, one a 6.1 inch screen and the other a 4.7 inch, and it happens in both. I suspect it isn't the CSS options that is causing this, since I haven't added anything to the About page text, only the contact form. I would guess it's more likely the options within the point-and-click system. I've noticed that setting margins/padding and max-width etc. sometimes has unintended effects.

Hello,


I'm sorry for the delay. I tested it again on my actual phone this time and I still can't replicate the issue with the text. Please try logging into your account > go to your about page > refresh the page and then go check it on your mobile browser. If the same issue persists, please send me the type of mobile device you are using, the OS version of the device, and the type of browser you are using in the device.


Arvin (Forum Moderator)

Thanks, Arvin!

I logged in, went to the About page, hit Reload this page, then cleared the mobile browser cache, then went to the website and checked. Unfortunately, it remains the same.


I'm checking on three different iPhones (6.1 inch, 4.7 inch, and 5.8 inch) using Safari on iOS 14.3.

Hello,


You're welcome! I still can't replicate the issue, I used iPhone 6, iPhone 6s and iPhone 7 (safari browser). Can you try upgrading the OS version of your phone to 14.4 if possible? If the same issue persists, please send me a screen shot or it will be best if you can send me a screen recording. Then I will send it to the development team for further investigation. 



Arvin (Forum Moderator) 

Hi Arvin,


I updated to iOS 14.4 on my 6.1 inch phone, then restarted the phone, cleared the Safari cache, and checked-- same issue. I'm uploading a short screen recording here, during which I show the change from portrait to landscape, hopefully this helps. Let me know if I can provide anything else.


Once again, thanks for all your help, on this and other items!

MP4

Hello,


Thank you for providing the screen recording. I understand the problem much better now. I have added a CSS code to fix this issue, please try refreshing your page again and check your site via mobile.


I'm very sorry if we keep getting back and fort with this. I hope everything will be okay now.



Arvin (Forum Moderator)

Login to post a comment