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,


No worries! I have added the CSS fix to your website, I hope it fixed all of your concerns. Please refresh your mobile browser and check your site again. 


- I made the text wider beside the contact form for desktop. 

- Fixed the margin so it would align to the upper section (mobile - both landscape and portrait).

- I made the form to have the same size as the paragraph for the contact form (Mobile - portrait). 

- I placed the contact form beside the text for mobile landscape as it looks awkward below the text. 



Arvin (Forum Moderator)

Thank you so much, Arvin! All the changes look great, thanks for placing the contact form beside the text-- it did look awkward. And the desktop page looks awesome too. This is great.


Just for my knowledge, what part of the CSS accomplishes this?: "Fixed the margin so it would align to the upper section (mobile - both landscape and portrait)." Normally I can figure it out but this time it's eluding me since I don't see two margin-left statements, only one, and nothing happens when I change it.


Thanks for all your help!


Hello,


I believe it's the padding for the landscape, I can't really remember well because I did a lot lately. But from what I can still remember, I considered a lot fixing it on your site since there's some padding outside of some elements already. It's hard to explain but I hope you get my point. It's like the container outside of the child element already has a padding or margin so I need to take that to consideration. As you can see the padding I added doesn't have the same value for each side - 0 top 6 right 0 bottom 2.5 left. 



Arvin (Forum Moderator) 

I understand, this is helpful. Thank you very much for all your help!

Login to post a comment