How do I keep my fixed header flowing with rest of the body when using an off-canvas solution?

Question

I am using the headhesive plugin and it's really slick, however I can't get it to flow with the off-canvas navigation I am using. As you can see the header is now over-lapping, it should be shifting over with the rest of the content. I tried changing the position property in the .masthead--clone selector below but that didn't work. I also tried simply moving the element in the html, but that didn't work as well. Any suggestions?

.masthead--clone {
/* Required styles */

position: fixed;
top: 0;
left: 0;
background: #fcf6e9;  
border-bottom: 1px solid rgba(253, 246, 232, .5)!important;
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
/* Translate -100% to move off screen */

-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
/* Animations */

-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

Answer 1

Add this to your javascript file

$( ".masthead--clone" ).click(function() {
  $( this ).toggleClass("pushRight");
});

Add this to your CSS stylesheet

.pushRight{
transform: translateX(280px);
}

The Javascript/JQuery will toggle a class to the menubar whenever you click on the hamburger icon. The class will push your menu bar to the right.