Navbar over banner using bootstrap 4.6.0-CodePudding

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?

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

<img src="https://i.ibb.co/FsP4kyJ/Temp-Banner.png"  style="width:100%;height:auto;" />
        
<!-- MENU - START -->
<nav  style="z-index:100;">
    <button  type="button" data-toggle="collapse" data-target="#TempNavBar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
    </button>

    <div  id="TempNavBar">
        <ul >
            <li >
                <a  href="Default.aspx" id="nddHome" role="button" data-hover="dropdown" aria-expanded="false" >
                    Home
                </a>
                <div  aria-labelledby="nddHome">
                    <a  href="Newsletter.aspx">Newsletters</a>
                    <a  href="#">News</a>
                </div>
            </li>
            <li >
                <a  href="#" id="nddAbout" role="button" data-hover="dropdown" aria-expanded="false">
                    About
                </a>
                <div  aria-labelledby="nddAbout">
                    <a  href="#">Directors</a>
                    <a  href="#">FAQs</a>
                </div>
            </li>     
            <li >
                <a  href="Service.aspx" id="nddServices" role="button" data-hover="dropdown" aria-expanded="false">
                    Services
                </a>
                <div  aria-labelledby="nddServices">
                    <a  href="#">Service 1</a>
                    <a  href="#">Service 2</a>
                </div>
            </li>
            <li >
                <a  href="Locations.aspx" id="nddLocations" role="button" data-hover="dropdown" aria-expanded="false">
                    Locations
                </a>
                <div  aria-labelledby="nddLocations">
                    <a  href="#">Location 1</a>
                    <a  href="#">Location 2</a>
                </div>
            </li>
            <li >
                <a  aria-current="page" href="#">Contact Us</a>
            </li> 
        </ul>
    </div>
</nav>

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

CodePudding user response：

Remove class fixed-top from nav, by replacing:

<nav  style="z-index:100;">

with:

<nav  style="z-index:100;">`

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

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

with:

 <button  type="button" data-toggle="collapse" data-target="#TempNavBar"

Add following lines to your styling:

nav {
  bottom: 0;
}

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

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

<div >
    <nav  style="z-index:100;">
....
...
...
    <img src="https://i.ibb.co/FsP4kyJ/Temp-Banner.png"  style="width:100%;height:auto;" />
</div>