画面サイズによって高さが変わるナビゲーションバーの下にトップ画像をくっつけたい

Question

前提・実現したいこと

画面サイズによって高さが変わるナビゲーションバーの下に
トップ画像を配置したいです。
ただ、画面サイズによってナビゲーションバーの高さが変わるため
ナビゲーションバーがトップ画像に被ってしまいます。

画面サイズによってトップ画像の位置を変更する、
方法をご教示して頂けませんでしょうか。

ナビゲーションバーはこだわりとしてスマホサイズ時(画面)にハンバーガーメニューにならないようにしております。

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

画面がsm以下(スマホ画面サイズ)になると、
ナビゲーションバーがトップ画像に被ってしまいます。

該当のソースコード

<div class="container-fluid">
    <div class="row">
        <div class="col-12 mt-sm-n5" style="mx-auto"></div>
    </div>
    <div class="row"><!-- top画像 -->
        <img class="img-fluid" src="画像url.png" style="padding-top:55px;">
    </div>

    <div class="row bg-white pt-4">
        <div class="col-12" style="mx-auto">
            <h5 class="text-center">hogehoge</h5>
        </div>
    </div>
</div>

.img-fluid {/* topのイメージ画像をレスポンシブルにする設定 */
  width: 100%;
  height: 100%;
  object-fit: contain; /* この一行を追加するだけ！ */
}

試したこと

画像の上などにカラムを配置してみたり、
マージントップなどで調整してみましたが、望む結果となりませんでした。

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

html,cssの他にbootstrap4で画面をコーディングしております。

Answer 1

jQuery を使っての回答です。
マージンをつけたい要素 に id: topImage
ナビゲーションバーの要素に id: header
をつけるものとして

$(function(){
	const $topImage = $("#topImage"); // 1)マージンをつけたい要素を指定
	$(window).on('load, resize',()=>{
		const headerH = $("#header").height(); // 2)ウインドウのリサイズ時にナビの高さを取得
		$topImage.css('margin-top', headerH); // 1)の margin-top に 2)の高さを入れる
    console.log(headerH);
	});
});