wpテーマ、シドニーのハンバーガーメニューについて

前提・実現したいこと

ワードプレスのシドニーをカスタマイズしているのですが、スマホ表示にした時のハンバーガーメニューの位置を変えたいと思い見た目は以下のソースコードのように記述したら、整ったのですが、ハンバーガーメニューをクリックすると、中の要素まで細くなってしまって、内容が見れない状態です。

ハンバーガーメニューの要素を表示させるようにするには、どうしたら良いのでしょうか？教えていただけると幸いです。宜しくお願いいたします。

該当のソースコード

CSS
1@media only screen and (max-width: 991px){
2.header-wrap .col-md-8 {
3    padding: 0;
4    display: inline;
5    width: 30px;
6    float: right;
7    margin-right: 20px;
8}
9	#mainnav-mobi ul li a{
10  width:100%;
11  position: fixed;
12		
13	}
14}

試したこと

@media only screen and (max-width: 991px){
.header-wrap .btn-menu {
padding: 0;
display: inline;
width: 30px;
float: right;
margin-right: 20px;
margin-top:0;

}
.btn-menuに変更してみたら、ハンバーガーメニューの中身は表示されるようになったのですが、次はレイアウトが崩れてしまいます。