「固定ヘッダーを考慮した」目次を押して、他の内部リンクに飛ぶスクロールをできればCSS若しくはjQueryで実現したいです。/ 固定ヘッダーを携帯でも完全に固定させたいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
今自分は、HTMLを用いて、divタグを使って記事の目次を作りましたが、固定ヘッダーが最上部にあるせいかどうもHTMLの見出しタグと文字が被るところにスクロールしてしまいます。

該当のソースコード

Googleで調べて、記事を参考にして、jQueryを入れたところ、スクロールに制限がかかり、一定時間画面を下に遷移させようとしても動かない謎の現象が起きたので理想の挙動を実現できませんでした。
const header = jQuery('#header');

jQuery('a[href^="#"]').on('click', function() {
const gap = header.outerHeight();
const speed = 500;
const href = jQuery(this).attr("href");
const target = jQuery(href == "#" || href == "" ? "html" : href);
const position = target.offset().top - gap;

jQuery("html, body").animate({ scrollTop: position }, speed, "swing");
return false;
});
const header = $('#header');

$('a[href^="#"]').on('click', function() {
const gap = header.outerHeight();
const speed = 500;
const href = $(this).attr("href");
const target = $(href == "#" || href == "" ? "html" : href);
const position = target.offset().top - gap;

$("html, body").animate({ scrollTop: position }, speed, "swing");
return false;
});

上記はサイトから引っ張て来たjQueryのコードになります。

### 試したこと

また、今度はCSSを使い、内部リンクを入れたID箇所にpadding-topとmargin-topを入れた所、固定ヘッダーが画面上部に行ってから機能するようになりました。
因みにこれもサイトを参考にしたものになりますが、親要素に「padding-top:固定ヘッダーの高さpx」をいれる由もかかれておりましたが、それを実行したところ、ヘッダーが縦に長くなっただけで目次への遷移は相変わらず見出しタグと被っており、機能しませんでした。

.restaurant-info{
 padding-top:100px;
 margin-top:-100px;
}
.food-info{
 padding-top:100px;
 margin-top:-100px;
}
.menu{
  padding-top:100px;
 margin-top:-100px; 
}
.review{
 padding-top:100px;
 margin-top:-100px; 
}
*上記のコードに関して、classではなく、IDなので.ではなく実際には#になります。
**「どなたかもしヘッダーが固定される前に挙動がおかしくなる原因をしっている方がいましたら早急にご教示頂けると非常に助かります。何卒宜しくお願いいたします。」**
*記事のヘッダーはこちらからご覧になれます。
スクロールを途中まですると目次遷移が通常通りの挙動になりますが、固定ヘッダーになる前はなぜか、見出しタグにいかない事がわかるかと思います。
[見本のレストラン紹介記事になります *実際に当レストランは存在致しません]
[補足: サイト自体はノーコードのWordpressの有料テーマGENSENを使用しており、CSSとHTML,少しだけjQueryで追加でカスタマイズを入れている形になります]
(https://linked-by-vecipe.com/blog/archives/introduce/partial-vegan_ito-restaurant)
あともう一点ですが、何故か携帯で記事を下にスクロールすると、問題ないですが、
上にスクロールすると、
目次が上の部分のヘッダーにかぶり、微動します。
cssでposition:fixed!importantを入れているにもかかわらずこうなる原因をご存知の方はこちらの方も一緒にご教示頂けると有難く存じ上げます。
長文失礼致しました。
以上が「固定ヘッダーに関する目次遷移」と「携帯で固定ヘッダーが上にスクロール時に固定されない問題」に関するご相談になります。ご回答の程、何卒宜しくお願い致します。