WordPressでハンバーガーメニューの位置を変えたい

Question

前提・実現したいこと

WordPressでスマホやタブレットで表示されるハンバーガーメニューの位置を、左下から左上に変えたいです。

WordPressでマテリアル２というテーマを使ってブログを作成しました。このテーマではスマホで画面表示する場合はデフォルトで左下にハンバーガーメニューがfixされています。しかし、気づきにくい場所にあると思い左上に移動させたいです。ソースコードのどの部分を張ればいいかわかならく、コードが長くなってすみません。
マテルアル２→https://wp-material2.net/

発生している問題・エラーメッセージ

移動ができません。

エラーメッセージ

該当のソースコード

.drawer-hamburger {
	position: fixed;
	z-index: 7;
	display: block;
	box-sizing: content-box;
	-webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
	transition: all .6s cubic-bezier(.19, 1, .22, 1);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	border: 0;
	outline: 0;
	background-color: transparent;
	width: 28px;
	border-radius: 0 3px 3px 0;
	padding: 11px 10px 21px;
	bottom: 20px;
	box-shadow: 1px 2px 5px rgba(0, 0, 0, .3);
}
.drawer-hamburger:hover {
	cursor: pointer;
	background-color: transparent
}
.drawer-hamburger-icon {
	position: relative;
	display: block;
	margin-top: 10px
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
	width: 100%;
	height: 2px;
	-webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
	transition: all .6s cubic-bezier(.19, 1, .22, 1);
	background-color: #222
}
.drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
	position: absolute;
	top: -10px;
	left: 0;
	content: ' '
}
.drawer-hamburger-icon:after {
	top: 10px
}
.drawer-open .drawer-hamburger-icon {
	background-color: transparent
}
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {
	top: 0
}
.drawer-open .drawer-hamburger-icon:before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}
.drawer-open .drawer-hamburger-icon:after {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.sr-only {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0
}
.sr-only-focusable:active, .sr-only-focusable:focus {
	position: static;
	overflow: visible;
	clip: auto;
	width: auto;
	height: auto;
	margin: 0
}
.drawer--sidebar, .drawer--sidebar .drawer-contents {
	background-color: #fff
}


@media screen and (max-width: 760px){
.drawer-hamburger {
	bottom: 12px;
}
}

試したこと

WordPressのテーマの編集＞マテルアル2_child:スタイルシート

.drawer-hamburger{
position:fix;
top:0px;
left:0ox;
}

を記載したりと.drawer-hamburgerや.drawer-hamburger-iconのCSSをいろいろと変えてみたのですが、上部へ移動できませんでした。

補足情報（FW/ツールのバージョンなど）

何日も解決できていません。よろしくお願いします。

Answer 1

CSSの一番下にこちらを追加してみて下さい。

.drawer-toggle {
    top: 0;
    bottom: initial;
}

あと蛇足ですが、position:fix;でなくposition:fixed;ですね。

Comments

[nabesi]

回答ありがとうございました！！教えて頂いた内容を入れてみると、びよーんと縦長のハンバーガーとなりましたので、heightを指定してみるとしっかりと収まりました！助かりました。ありごとうございました(´｡•ㅅ•｡`)