Mobile Menu Not Working After 3.3.8 Update

Mobile device in use: Sony Xperia M2 Dual

Problem:

When I use Top Bar for main menu:

1. Hamburger Icon for menu shoots off screen to the right and cannot be seen at all on the HOMEPAGE. A horizontal scroll is created by itself and the icon can be seen only when I horizontally scroll.

2. Even when I horizontally scroll to right and access the hamburger menu, the icon simply refuses to work! It sits dead and doesn’t work at all.

When I use Header menu, hamburger menu icon works just fine BUT:

1. Hamburger Icon for menu shoots off screen to the right and cannot be seen at all on the HOMEPAGE. A horizontal scroll is created by itself and the icon can be seen only when I horizontally scroll.

2. When I go ahead and select a category from the open menu the category page opens and the menu icon sits within the screen real estate. I mean, the icon is visible and perfectly working.

IF I TRY TO USE TOPBAR WITH BOXED LAYOUT:

The topbar shoots out of the box from the right.

SIDEBAR SCROLL:

The sidebars are scrolling at different pace. The primary sidebar scrolls up first and then the secondary sidebar starts scrolling.

Sidebars are still ok but the mobile menu thing is really really terrifying. A horizontal scroll on homepage to find the menu icon is something Google will penalize pretty badly.

HELP HELP HELP HELP

My website URL: Facts Legend