我的标题图像隐藏在固定顶部导航栏后面

Question

我正在为我的布局使用引导程序。我有这个导航栏

<nav class="navbar navbar-expand-lg fixed-top navbar-light">
    <a class="navbar-brand" href="#">
        <img class="logo" src="../../../assets/navbar/logo.png" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav  ml-auto mr-4">
            <li class="nav-item active">
                <a class="nav-link" routerLink="/about-us">ABOUT US <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/services">SERVICES</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/careers">CAREER</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/contact-us">CONTACT US</a>
            </li>
        </ul>
    </div>
</nav>

在导航栏下我有这个标题图片，上面有文字

<div class="container-header">
    <img src="../../../assets/about-us/about-us-image-header.png" alt="About Us" style="width:100%;">
    <div class="centered-header-text">
        <h1>WHO WE ARE</h1>
    </div>
</div>

这里的问题是当我添加固定顶部时，我的图像隐藏在导航栏后面。我搜索了很多并找到了一些解决方案，他们说我应该在导航栏上给出固定高度 之后在标题上，我还应该给 margin-top width 从导航栏的固定高度。

但这是一个讨厌的解决方案，它只适用于更大的设备。当设备较小时， 我从引导程序中获得了开箱即用的响应式汉堡菜单，其中所有锚标签都在里面，当我点击它时，锚标签就会显示出来。在这种情况下，图像仍然在导航栏后面 并且固定高度的肮脏解决方案不起作用。

我该如何解决这个问题？

Answer 1

添加置顶解决了这个问题。

<nav class="navbar navbar-expand-lg navbar-light sticky-top">