シリウスのレスポンシブＴＰのスマートフォンレイアウトでは、ｇナビが、ＣＳＳＴＰ同様
ハンバーガーメニューへと切り替わりますね..

 

さて、スクロールするとハンバーガーメニューは上に合わせ移動し隠れるはデフォルトでの
指定作動なんですが、固定したままにできないか？

 

スクロールしても途中で記事内位置を上に戻さなくても、いつでもハンバーガーメニューを
開けないか？
...とのご質問が寄せられましての記事追加となります..

 

私例でいえば、そこまで考えていなかった...不便も感じられないし...で、別に固定しなくとも
なんて..そんなことで記事にもせず忘却していた事情ですが、それもありかな？

 

 

gナビを固定するとスマートフォンでは視野が狭くなり...なんかお邪魔虫..

 

でも、ハンバーガーメニューならわずかの占有面積なのでさほど違和感もない...
スクロール終盤でも記事メンを上に戻さずともポチで他メニューを観察できる..

 

そう思われる方はご利用ください...

 

---

 

使用条件
シリウスのレスポンシブテンプレートのみで作動..何度も検証済み...

 

当サイトはいじりすぎてしまったためか、取り付けはできるものの、開いたまま...
2度押しで収納しない弊害あり...調整中..

 

カスタマイズ例では2度押し目には収納しますからご安心ください..

 

スタイルシートＣＳＳの以下をご確認ください...

 

この行です
@media screen and (max-width: 640px) {
#nav {
border-bottom: none;
background-color: none;
}
#topmenubox {
padding: 0;
position: relative;
margin: 0;
}
#topmenubox #topmenubtn {
color: #333333;
cursor: pointer;
display: block;
font-size: 10px;
height: 20px;
padding-top: 15px;
position: absolute;
right: 10px;
text-align: center;
top: -45px;
width: 40px;
}
#topmenubox #topmenubtn:before {
border-bottom: 3px solid #333333;
border-top: 3px solid #333333;
content: "";
height: 3px;
left: 7px;
position: absolute;
top: 0;
width: 26px;
}
#topmenubox #topmenubtn:after {
border-top: 3px solid #333333;
content: "";
height: 0;
left: 7px;
position: absolute;
top: 12px;
width: 26px;
}
#topmenu ul {
display: none;
table-layout: auto;
margin: 0;
padding: 0;
}
#topmenu ul.menuon {
display: block;
}
#topmenu li {
border-bottom: 1px solid #777777;
display: block;
text-align: left;
}
#topmenu li:last-child {
border-bottom: none;
}
#topmenu li a {
color: #fff;
padding: 8px 45px 8px 20px;
position: relative;
text-align: left;
}
#topmenu li a:before {
border-bottom: none;
border-left: none;
border-right: 2px solid #ffffff;
border-top: 2px solid #ffffff;
background-color: transparent;
height: 5px;
margin-top: -4px;
right: 20px;
top: 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 5px;
}
#topmenu li:first-child a:after {
background-color: transparent;
left: 0;
width: 0;
}
#topmenu li:last-child{
border-right: none;
}
}

 

/*
==================================================
メインコンテンツ

 

ここまでの項目すべて張り替えれば固定化が完了します...
原本記載をどのように変えたのかもご確認ください...

 

カラーは、オレンジＴＰに合わせてますが、他のカラーを利用の場合指定箇所を書き換えれば
あなたのサイトカラーに合わせることができます...

 

...カラー指定箇所は全部で6か所

 

改行済み
@media screen and (max-width: 640px) {
#nav {
border-bottom: #d3751c;　*/カラー改行箇所/*
background-color: #d3751c;　*/カラー改行箇所/*
z-index: 2000;
position:fixed;
}
#topmenubox {
padding: 0;
position:fixed;
margin: 0;
z-index: 2000;
}
#topmenubox #topmenubtn {
color: #d3751c;　*/カラー改行箇所/*
cursor: pointer;
display: block;
font-size: 10px;
height: 30px;
padding-top: 5px;

 

position:fixed;
right: 0px;
text-align: center;
top: 17px;
width: 40px;
z-index: 2000;
}
#topmenubox #topmenubtn:before {
border-bottom: 3px solid #d3751c;　*/カラー改行箇所/*
border-top: 3px solid #d3751c;　　*/カラー改行箇所/*
content: "";
height: 3px;
right: 3px;
position:fixed;

 

top: 15px;
width: 26px;
z-index: 2000;
}
#topmenubox #topmenubtn:after {
border-top: 3px solid #d3751c;　*/カラー改行箇所/*　
content: "";
height:3px;
right: 3px;
position:fixed;
top: 9.5px;
width: 26px;
z-index: 2000;
}

 

 

 

#topmenu ul {
display: none;
table-layout: auto;
margin: 0;
padding: 0;
z-index: 2000;
position:fixed;
}

 

#topmenu ul.menuon {
display: block;

 

}
#topmenu li {
border-bottom: 1px solid #777777;
display: block;
text-align: left;

 

}
#topmenu li:last-child {
border-bottom: none;

 

}
#topmenu li a {
color: #fff;
padding: 8px 45px 8px 20px;
position: relative;
text-align: left;
background-color: #d3751c;
}
#topmenu li a:before {
border-bottom: none;
border-left: none;
border-right: 2px solid #ffffff;
border-top: 2px solid #ffffff;
background-color: transparent;
height: 5px;
margin-top: -4px;
right: 20px;
top: 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 5px;
position:fixed;
z-index: 2000;
}
#topmenu li:first-child a:after {
background-color: transparent;
left: 0;
width: 0;
position:fixed;
z-index: 2000;
}

 

#topmenu li:last-child{
border-right: none;

 

}
}

 

ここまで...

 

/*
==================================================

 

 

概要説明

 

position:fixed; で不作動としています
単なる追加ですとメニューが左寄せになってしまいましたので右に移動しました..

 

z-index: 2000;　で、記事上に重なるよう指示

 

上記二つの指示コードは、不要の箇所もあるかとは思いますが、とりあえずは
作動するので...

 

もし、何らかのエラーが発生しましたらサポートよりご連絡ください..

 

 

ハンバーガーメニューの固定化？
グローバル　ナビゲーションカスタマイズまとめ
トップページ

関連ページ

グローバルナビ、背景カラーとフォントカラーの変更方法

シリウスレスポンシブ構造標準のグローバル　ナビ 背景カラー、フォントカラーの変更方法の解説

ハンバーガーメニューからドロワースタイルに可変させる手順

シリウス風のハンバーガーデフォルト形式何ですが、横から滑り表示するメニュー一覧（drawer）を設定する手順のご案内です。

ハンバーガーメニューのカスタマイズ（カラー変更編）

シリウスレスポンシブサイトのハンバーガーメニューはサイトカラーに合わてがデフォオルトですね。デモ、ヘッダーカラーによっては認識ずらくなることもあるので仕様を確認して相応にカスタマイズしてみましょう。