I have implemented a bootstrap Nav on this page
To achieve a sticky top navigation, I used the fixed-top class. However, this caused the navbar to align left instead of right as intended. It also ended up covering my logo, which was originally aligned to the left.
Additionally, I am facing an issue with the hamburger responsive menu. When opened in responsive mode, the dropdown is stuck to the right of the button, causing the toggle to jump to the middle of the page once the menu is realigned to the right again.
<!-- <div class="site-nav col-6 col-sm-6 col-md-9">-->
<nav class="navbar navbar-expand-lg navbar-light bg-nav-bar fixed-top " role="navigation" style="max-width: 1360px; margin: 0 auto;">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://careers.baffinland.com/wp-content/themes/darkStarMediaTheme/images/logo.png" width="236" alt="Baffinland logo" class="banner-logo " style="float: left; text-align:left; left: 0px;" /></a>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><ul id="menu-main-menu" class="nav navbar-nav navbar-right"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-16 nav-item"><a title="About Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-16">About Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-16" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17 nav-item"><a title="Who We Are" href="https://www.baffinland.com/about-us/who-we-are/" class="dropdown-item">Who We Are</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-20 nav-item"><a title="Operation" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-20">Operation</a></li>
</ul></div>
</nav>
<!-- </div> -->