Navbar over banner using bootstrap 4.6.0

Issue

I'm trying to create a responsive master page in VS 2019 and I'm using Bootstrap 4.6.0. I would like my navbar to be at the bottom left of my banner image when in desktop view, but when in mobile view I need the navbar button to be all the way to the right. Should I add style properties to the navbar tag to put it in the correct position?

UPDATE: Updated with changes Konstantinos Gallis suggested. I also updated data-hover to data-toggle to correct the dropdown menu on my project, but it doesn't seem to work on here.

    
      .MenuFormat {
        background-color:#224474;
        font-family: open-sans, sans-serif;
        color: white!important;
        font-weight: 700;
        font-size: 24px;
        padding-right: 25px;
      }

      nav {
        bottom: 0;
      }

      @media only screen and (max-width: 600px) {
        nav {
          right: 0;
          bottom: unset;
        }
      }
  

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <img src="https://i.ibb.co/FsP4kyJ/Temp-Banner.png" class="mx-auto img-fluid" style="width:100%;height:auto;" />

<div class="position-relative">
    <!-- MENU - START -->
    <nav class="navbar navbar-light navbar-expand-sm bg-light position-absolute" style="z-index:100;height:50px;padding:0!important;">

    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#TempNavBar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    
        <span class="navbar-toggler-icon"></span>
    </button>

      <div class="collapse navbar-collapse" id="TempNavBar" >
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddHome" role="button" data-toggle="dropdown" aria-expanded="false" >
                    Home
                </a>
                <div class="dropdown-menu" aria-labelledby="nddHome">
                    <a class="dropdown-item" href="#">Newsletters</a>
                    <a class="dropdown-item" href="#">News</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddAbout" role="button" data-toggle="dropdown" aria-expanded="false">
                    About
                </a>
                <div class="dropdown-menu" aria-labelledby="nddAbout">
                  <a class="dropdown-item" href="#">Directors</a>
                  <a class="dropdown-item" href="#">FAQs</a>
                </div>
            </li>     
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddServices" role="button" data-toggle="dropdown" aria-expanded="false">
                    Services
                </a>
                <div class="dropdown-menu" aria-labelledby="nddServices">
                  <a class="dropdown-item" href="#">Service 1</a>
                  <a class="dropdown-item" href="#">Service 2</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddLocations" role="button" data-toggle="dropdown" aria-expanded="false">
                    Locations
                </a>
                <div class="dropdown-menu" aria-labelledby="nddLocations">
                  <a class="dropdown-item" href="#">Location 1</a>
                  <a class="dropdown-item" href="#">Location 2</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link MenuFormat" aria-current="page" href="#">Contact Us</a>
            </li> 
        </ul>
    </div>
  </nav>
      <!-- MENU - END   -->
     
    
  </div>  

Thank you for any help or direction you can give me.

Solution

1. Remove class fixed-top from nav, by replacing:

<nav class="navbar navbar-light navbar-expand-sm bg-light fixed-top position-absolute" style="z-index:100;">

with:

<nav class="navbar navbar-light navbar-expand-sm bg-light position-absolute" style="z-index:100;">`

---

2. Add class ml-auto to .navbar-toggler, by replacing:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#TempNavBar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

with:

 <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#TempNavBar"

---

3. Add following lines to your styling:

nav {
  bottom: 0;
}

@media only screen and (max-width: 600px) {
  nav {
    right: 0;
    bottom: unset;
  }
}

---

4. Wrap you nav and img with a div with the class position-relative

<div class="position-relative">
    <nav class="navbar navbar-light navbar-expand-sm bg-light position-absolute" style="z-index:100;">
....
...
...
    <img src="https://i.ibb.co/FsP4kyJ/Temp-Banner.png" class="mx-auto img-fluid" style="width:100%;height:auto;" />
</div>

Answered By - Konstantinos Gallis