Please use our documentation to create navbar: https://mdbootstrap.com/components/navbar/

Here is the working example:

<!--Navbar-->
 <nav class="navbar navbar-expand-lg navbar-dark primary-color fixed-bottom">

<!-- Navbar brand -->
 <a class="navbar-brand" href="#">Navbar</a>

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

<!-- Collapsible content -->
 <div class="collapse navbar-collapse" id="navbarSupportedContent">

<!-- Links -->
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Features</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Pricing</a>
 </li>

<!-- Dropdown -->
 <li class="nav-item dropdown dropup">
 <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>

</ul>
 <!-- Links -->

<!-- Search form -->
 <form class="form-inline">
 <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 </form>
 </div>
 <!-- Collapsible content -->

</nav>
<!--/.Navbar-->

Regards

 

---

The navbar is on the bottom for xs & sm screen then flips to top for md & lg screens The issue is with the space on the LHS on xs & md screens and both LHS & RHS for md & lg screens The dropdown needs to be repositioned on the xs & sm screen. Is there an easy way to get rid of the navbar shadow on the xs & sm screens? Thanks :) Navbar code below: <nav class="navbar navbar-dark navbar-expand-md fixed-bottom p-0 nav-top-md-lg"> <a class="navbar-brand d-none d-md-block bg-dark pl-3" href="#">Navbar</a> <div data-pg-name="Toggler Wrap" class="text-center w-100 d-md-none"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="fa fa-chevron-up text-dark"></span> </button> </div> <div class="collapse navbar-collapse w-100" id="navbarNavDropdown"> <ul class="navbar-nav bg-dark w-100 flex-row justify-content-md-end justify-content-around"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav>

---

Please copy here Your code or send a link to screen of that situation. Regards

---