After working tirelessly on converting one of our websites to be mobile-friendly, I've hit a roadblock. While the standard approach is to place the hamburger menu on the left and have the content slide to the right, I'm interested in doing the reverse. Despite following a helpful tutorial on hamburger menus for mobile sites and implementing the necessary changes in the JS and CSS files, nothing seems to be functioning properly.
In my JavaScript file, I adjusted the code as follows:
//Animate margin for the entire container using jQuery UI
jQuery("#container").animate({ "marginRight": ["70%", 'easeOutExpo'] }, {
duration: 700
});
//Animate margin for the whole container back to its original state with a jQuery UI animation
jQuery("#container").animate({ "marginRight": ["0", 'easeOutExpo'] }, {
duration: 700,
In the CSS file, I simply switched any rules that had "right: 0;" to "left: 0;" and vice versa. However, despite seemingly functional code when debugging in Firebug, the content doesn't slide to the left on the site. Any assistance or advice would be greatly appreciated!