固定ページへのリンクを常に表示する方法

多分イメージされているようなことはたいていできると思うので、具体的にどうなって欲しいかが欲しい所です。

例えばタブレットの画面で表示されるどこに何をどのようにと言う感じで。
で、これらはPCの画面でもスマホでも表示されているんでしょうから、それぞれに「どこ」と言うのは重要です。
スマホだけ場所を変えるというのもできます。

わいひらさんも言われているみたいにグローバルメニューが「それ」だとして、「それ」がhtmlソース内にある限り、「それ」はどこからでも参照できて、どこにでもどのようにでも表示することが可能です。

表示方法や仕組みは何かしらアイデアを出すので、最終的にどこにどのようにのデザインを考えてみて下さい。

グローバルメニューで合っています
グローバルメニューをどこにどのようにという見え方については現状のままという表現になってしまいます
CSSのカスタマイズが難しいのですね
ハードルが高いのであれば諦めようと思っています

「デフォルトでグローバルメニューはたたまれて（隠されて）いるが、デフォルトを展開した状態にする」
という修正でしたら修正箇所は少ないでしょうか？
つまりサイトを開いた時にグローバルメニューは表示されていて、右端のボタンが押されたらグローバルメニューがたたまれるという、通常とは逆の動きになるという意味です

現状では、右端のボタンを押さないと見えないグローバルメニューを、ユーザに押させること無く見せたい。というのが要望です

#navi ul {
  display: block;
}

まずはこれでulが表示されます。ついで、

#navi .sub-menu {
  display: block;
}

これで.sub-menuも表示されます。つまり全部表示されている状態です。

親テーマjavascript.js内に、「メニューボタンの開閉」と言うのがあります。ここは修正する前にエラー(というほどのものではありませんが)がまず修正する必要があります。

header_menu = jQuery(‘#navi ul’);
ここは、
var header_menu = jQuery(‘#navi ul’);

次のif文の、(‘display’) == ‘none’は、===と3つのイコールで繋ぎます。まぁ2つでも良いのですけれども。
で、if {…} else {…}; ←ここのifの最後の括弧に「;」がついてるのでこれは外して下さい。

ここの動作は、#navi ulにstyle=”display:none”とある場合、#navi ulをslideDownで表示して、そうでない場合は、slideUpで非表示にすると言う動作になっています。
つまり、

[div id=”navi”]
[ul class=”menu” style=”display:none”]
[li][/li]
[/ul]
[/ul]

こういう状態の時は、ulが非表示なので、右上のアイコンをクリックしたら、slideDownで表示するわけです。

もう少し手を加えないといけませんが、この部分は、以下のサンプルのようにも書けます。

サンプル: cssの設定で表示したりしなかったり | jsFiddle

このサンプルでは、display:noneを使わずにcssに予め非表示の状態を作っておき、jQueryでは表示するためのcssである.showを付け加える処理をさせています。.show自体はスタイルを持たないただのクラスです。しかし何かしらと合わせることでcssの識別として利用できます。

以前jQuery3.0では、display:noneの要素をshow()であったり、slideDown()等で表示できなくなるという話が出ていましたが、先日発表された3.0ベータでは、以前と同じようにdisplay:noneの要素をshow()などで表示できるようになったらしいです。
ただし、正式バージョンではどうなるかわからないので、一応、display:noneを使わない方法で実装してみました。スライドダウンやスライドアップにこだわろうとすると、もう少しcssに手を入れる必要も出てくるわけですけれども、単純に表示したり非表示にしたり、あるいは左右から表示させてみたりと、cssでできるようなことはなんでも取り入れることができます。

サンプルでは、オリジナルと同様の動作をするようにしましたが、このような手法をとった場合質問の通りにオリジナルと逆の動作をさせるのであれば、css側で予め非表示にして、何かしらをクリックすることで表示していた状態を逆にすればよいわけです。
つまり、予め表示にしておいて、何かしらをクリックすることで非表示にする。これはcssだけを変更すればできます。

サンプルを全く同じでなくても、同じような感じで実装する場合、親テーマのjavascript.jsの該当部分(「メニューボタンの開閉」)をコメントアウトしておき、子テーマにサンプルのスクリプトを書きます。
で、後はデフォルトで非表示になっている部分をcssで表示にして、サンプル通りであれば.showがついたものを非表示にするというcssをかけば実現できます。

おそらくcssで、

#navi ul {
  display: none;
}

と、どこかにあるはずですので、子テーマstyle.cssあたりで、

#navi ul {
  display: block;
}

とすればいけます。更にjQueryで#navi のulにstyleタグでdisplay:noneがついているかも知れないので、その場合は、サンプルの$(function(){….})の中に、
$(“#navi ul”).removeAttr(“style”);
と入れれば、スタイルの部分は消すことができます。

サンプル: [レスポンシブ対応]flexでグローバルメニューをちょっと動かすサンプル | codepen
あたりも何かしらの参考までに。

[div id=”navi”]
[ul class=”menu” style=”display:none”]
[li][/li]
[/ul]
[/ul] ← [/div]でした

詳しい解説ありがとうございます

私にはすこし難しそうですがじっくり腰を据えて頑張ろうと思います

ありがとうございました！