現状
画像のように、ページを開いたときにすでにバナーがメニュー下に重なり、見づらくなってしまっています。
いろいろ試してみたのですが、動きません。お力お貸しください!!
こちらとマルチポストしております。こちらで情報が更新・解決され次第、反映する予定です。どうぞよろしくお願いいたします。
実現したいこと
分かりにくいかもしれませんが、メニューバー(白い部分)とバナー(山の写真の部分)が重なっています。別のページにも同様のメニューバーがあるのですが、完全に文字が見えない部分もあります。スクロールすると当然重なるので、メニューバーに問題はないと思います。そこでバナーの位置を下に下げたいです。
コード
{% load wagtailimages_tags wagtailcore_tags %}
{% image self.banner_img fill-900x400 as img %}
<div class="container-fluid bg-dark text-light p-5 " style="background-image: url('{{ img.url }}'); background-size: contain">
<div class="row">
<div class="col-12 text-center">
<div class="row justify-content-center">
<div class="post-heading">
<h2>{{ self.title }}</h2>
<p class="subheading">{{ self.text|richtext }}</p>
</div>
</div>
</div>
</div>
</div>
{% extends "base.html" %}
{% load wagtailcore_tags %}
{% block content %}
<main class="main">
<div class="contain">
{% for block in page.content %}
{% include_block block %}
{% endfor %}
</div>
</main>
{% endblock %}
追記 こちらでレンダリングされるHTMLを追記しました。