ワードプレスでハンバーガーメニューの位置を変えたい(画像あり)

Question

現在、ワードプレスにてサイトを制作しておりまして、
ハンバーガーメニューを左上に固定したいと思っております。

スマホ表示の時は問題ないのですが、
PC表示時、幅を max-width:750px; に固定しているのに、
メニューのHTMLがその幅を指定しているタグの外にあるので、750pxの中に収まってくれません。

このハンバーガーメニューは、ネットで拾ってきた js と css を外部から読み込んでいる為、750px のdivタグ内に入っておらず、body タグ内には入っています。(ワードプレスのメディアライブラリから読み込んでいます)

ハンバーガーメニューのHTMLタグは、jsファイルの中に記載されているようです。

!function(a,b,c){function d(b){this.settings=a.extend({},f,b),this._defaults=f,this._name=e,this.init()}var e="fatNav",f={};a.extend(d.prototype,{init:function(){var b=this,c=this.$nav=a(".fat-nav"),d=this.$hamburger=a('<a href="javascript:void(0)" class="hamburger"><div class="hamburger__icon"></div></a>');this._bodyOverflow=a("body").css("overflow"),navigator.userAgent.match(/(iPad|iPhone|iPod)/g)&&c.children().css({height:"110%",transform:"translateY(-5%)"}),a("body").append(d),a().add(d).add(c.find("a")).on("click",function(a){b.toggleNav()})},toggleNav:function(){var b=this;this.$nav.fadeToggle(400),b.toggleBodyOverflow(),a().add(this.$hamburger).add(this.$nav).toggleClass("active")},toggleBodyOverflow:function(){var b=this,c=a("body");c.toggleClass("no-scroll");var d=c.hasClass("no-scroll");c.css("overflow",d?"hidden":b._bodyOverflow)}}),"undefined"==typeof a[e]&&(a[e]=function(a){return new d(this,a)})}(jQuery,window,document);

max-width:750px と指定したdivタグ内に入れれば、いけるような気がするのですが、
HTMLをいじるファイル等が分からず、どうすればよいでしょうか・・？

どうぞ宜しくお願い致します。

.hamburger {
  display: block;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 12px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
.hamburger__icon {
  position: relative;
  margin-top: 7px;
  margin-bottom: 7px;
}

Answer 1

無理やりCSSで位置を固定

@media (min-width: 767px) {
	.hamburger{
		left: 50%;
		margin-left: -370px;
	}
}