How do I extend my navbar banner below my navbar row?

Question

I'm rebuilding a new website and upgrading from Bootstrap 3.3 to Bootstrap 5. I'm re-creating the look and feel of the navbar seen here . I've gotten very close but am having trouble with the banner. I can't figure out how to get the banner to extend below the navbar and still fit within the container class.

Here's a chunk of their code that displays the image I'm also opting to use:

<nav class="navbar navbar-inverse navbar-static-top">
    <script src="http://www.utah.gov/nav/fluidheader.js" type="text/javascript" class="utahgov"></script>
    <div class="container">
        <img src="root/images/purpleLogo.png" class="purpleLogo" />
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav ">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">HOME<span class="caret"></span></a>
                    <ul class="dropdown-menu scrollable-menu" role="menu">
                        <li ><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li>
                    </ul>
                </li>
                <li><a href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
                <li><a href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
                <li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES<span class="caret"></span></a>
                    <ul class="dropdown-menu scrollable-menu" role="menu">
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingWell.php">Drilling a Well</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceOperatorChanges.php">Operator Changes</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceReporting.php">Reporting</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

It looks like all they're doing is putting the image in the same container as the navbar items and the banner is automatically spilling out of the navbar. So far, I have the navbar elements in their own row. Then I divided the banner from the navbar items using columns. However, since the banner is inside the navbar class, it extends the navbar too low.

 img { vertical-align: middle; max-width: 100%; max-height: 100%; margin-bottom: 15px; }.homeBanner{ display: block; margin-right: 0; margin-left: 0; z-index: 1; width: 100%; }.purpleLogo{ position: absolute; z-index: 2; }.hover:hover{ background-color: #754775; }.hover a{ text-decoration: none; }.navbar-nav { display: flex; flex-wrap: wrap; justify-content: space-evenly; }.navbar-dark.navbar-nav.nav-link:focus, .navbar-dark.navbar-nav.nav-link:hover { color: #fff; } a.nav-link.dropdown-toggle.show { background-color: #78496a; transition: none; }.navbar-nav > li >.dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; font-size: 14px; }.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #f5f5f5; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <div class="container"> <div class="row"> <div class="col-2"> <img id="purpleLogo" src="https://www.ogm.utah.gov/coal/images/purpleLogo.png" /> </div> <div class="col-10"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li> </ul> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">ABOUT US</a> <ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php">About Us</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#mission">Mission Statement</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#responsibilities">Responsibilities</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">DATA RESEARCH CENTER</a> <ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="http://localhost:1234/Utah_OG_Website/dataResearchCenter.php">Data Research Center Home</a></li> <li><a href="https://dataexplorer.ogm.utah.gov/">Data Explorer</a></li> <li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-main.xhtml">LiveData Search</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/electronicReporting.php">Electronic Reporting</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li> <li class="dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES</a> <ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">OTHER LINKS</a> <ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Associations%3A">Oil and Gas Associations</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=For%20Students%20and%20Teachers">For Students and Teachers</a></li> <li><a href="http://www.naturalresources.utah.gov/">Utah DNR</a></li> <li><a href="http://www.utah.gov/main/index">Utah.gov</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li> </ul> </div> </div> </div> </div> </nav>

Answer 1

I was able to solve my problem. There were a couple of things I had to do:

1. I ended up not needing to use the row class nor the column classes.
2. In my styles.css file, purpleLogo was labeled as a class when it was supposed to be an id.
3. I had to give #navbarSupportedContent a left margin of 224px so the navbar links didn't overlap the banner.
4. I had to give #purpleLogo a top position of 0px.
5. I had to remove the .img class and assign these properties to individual ids.

 #homeBanner{ display: block; margin-right: 0; margin-left: 0; z-index: 1; width: 100%; } #purpleLogo{ position: absolute; top: 0px; } #navbarSupportedContent { margin-left: 224px; }.hover:hover{ background-color: #754775; }.hover a{ text-decoration: none; }.navbar-nav { display: flex; flex-wrap: wrap; justify-content: space-evenly; }.navbar-dark.navbar-nav.nav-link:focus, .navbar-dark.navbar-nav.nav-link:hover { color: #fff; } a.nav-link.dropdown-toggle.show { background-color: #78496a; transition: none; }.navbar-nav > li >.dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; font-size: 14px; }.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #f5f5f5; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <div class="container"> <img id="purpleLogo" src="https://minerals.ogm.utah.gov/images/purpleLogo.png" /> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li ><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li> </ul> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">ABOUT US</a> <ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php">About Us</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#mission">Mission Statement</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#responsibilities">Responsibilities</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#staff">Staff</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">Emergencies</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#email">Email Us</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#facts">O&G Facts</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">DATA RESEARCH CENTER</a> <ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="http://localhost:1234/Utah_OG_Website/dataResearchCenter.php">Data Research Center Home</a></li> <li><a href="https://dataexplorer.ogm.utah.gov/">Data Explorer</a></li> <li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-main.xhtml">LiveData Search</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/electronicReporting.php">Electronic Reporting</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li> <li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li> <li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-logs/logs-main.xhtml">WELL LOGS</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/noticesAndUpdates.php">NOTICES</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/rules.php">RULES AND STATUTES</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/publications.php">PUBLICATIONS</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/wellSpacingBoardOrders.php">WELL SPACING</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/mapResources.php">MAP RESOURCES</a></li> <li class="dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES</a> <ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingWell.php">Drilling a Well</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceOperatorChanges.php">Operator Changes</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceReporting.php">Reporting</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">OTHER LINKS</a> <ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Associations%3A">Oil and Gas Associations</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=For%20Students%20and%20Teachers">For Students and Teachers</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=National%20Energy%20Foundation)-,Government%20Agencies,-Automated%20Geographic%20Reference">Government Agencies</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Industry%20Information%20and%20Research">Industry Information and Research</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Pricing">Oil and Gas Pricing</a></li> <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Some%20of%20Utah%27s%20Top%20Oil%20and%20Gas%20Producers">Some of Utah's Top Oil and Gas Producers</a></li> <li><a href="https://www.ogm.utah.gov/Board/redesign/board.html">DOGM Board Members</a></li> <li><a href="http://www.naturalresources.utah.gov/">Utah DNR</a></li> <li><a href="http://www.utah.gov/main/index">Utah.gov</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">EMERGENCIES</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/permittingReview.php">PERMITTING</a></li> <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/inspectionsReview.php">INSPECTIONS</a></li> </ul> </div> </div> </nav> <img id="homeBanner" src="https://minerals.ogm.utah.gov/images/MINERALSmainSmall.jpg" />