Putting an image below the nav bar bootstrap and css WITHOUT it being overlapped by text-CodePudding

I am simply trying to place an image directly UNDER the navbar. I DO NOT want the nav bar text to overlap the image in any way.

No matter what I do in my code the image stays locked to the end of the navbar. It will not go into its own separate row BELOW the nav bar.

I have tried putting it in its own div, section, p, ul, li, and nothing works.

Is there a way to adjust the image in another contianer, without using the break tags.

    <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md fixed-top">
        <a href="#" class="navbar-brand">TEXT</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="toggle navigation">
            <span class="navbar-toggle-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navLinks">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">Projects</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">Contact</a>
                 </li>
        </ul>
    </div>
</nav>
<br>
<br>
<br>
<br>

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-5">
                    <img class="img-thumbnail rounded-circle" src="/Users/admin/Pictures/img.jpg" alt="img">
                </div>

CodePudding user response：

fixed-top makes nav to be position: fixed, So the vertical height can't be filled. If any further tags are added, those tags will stack to the nav.

To overcome this situation use padding-top of approximate calculation of nav height say 50px. So applying this value to the further tag in your case <body style='padding-top:50px'>

Or else we can use sticky-top, but it is not compatible for all browser yet

CodePudding user response：

I think you must use position sticky instead of position fixed for your navbar