我正在为此页面使用引导导航 http://careers.baffinland.com
我添加了固定顶部类，因为我需要一个粘性顶部，但这会覆盖navbar-right类并将菜单向左对齐。它还掩盖了我的徽标，该徽标向左对齐。
此外，我想使汉堡式响应菜单向左打开，当您在响应模式下打开时，下拉菜单将停留在按钮的右侧（直到菜单再次右对齐时，该菜单项才会清除）切换到页面中间的切换
<!-- <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> -->
答案 0 :(得分：1)
您的徽标在导航栏之外，而您的“导航栏品牌”在“无显示”上。
<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 href="http://careers.baffinland.com/" class="navbar-brand" title="Baffinland Iron Mines" rel="home"><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" style="display: none;">
<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>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18 nav-item">
<a title="Our Leadership" href="https://www.baffinland.com/about-us/our-leadership/" class="dropdown-item">Our Leadership</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19 nav-item">
<a title="FAQ" href="http://www.baffinland.com/about-us/faq/" class="dropdown-item">FAQ</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>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-20" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21 nav-item">
<a title="Mary River Mine" href="http://www.baffinland.com/operation/mary-river-mine/" class="dropdown-item">Mary River Mine</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22 nav-item">
<a title="Shipping & Monitoring" href="http://www.baffinland.com/operation/shipping-and-monitoring/" class="dropdown-item">Shipping & Monitoring</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-23 nav-item">
<a title="Sustainability" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-23">Sustainability</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-23" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24 nav-item">
<a title="Overview" href="http://www.baffinland.com/sustainability/overview/" class="dropdown-item">Overview</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25 nav-item">
<a title="Health & Safety" href="http://www.baffinland.com/sustainability/health-and-safety/" class="dropdown-item">Health & Safety</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26 nav-item">
<a title="Environment" href="http://www.baffinland.com/sustainability/environment/" class="dropdown-item">Environment</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27 nav-item">
<a title="Communities" href="http://www.baffinland.com/sustainability/communities/" class="dropdown-item">Communities</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28 nav-item">
<a title="Learning & Development" href="http://www.baffinland.com/sustainability/learning-and-development/" class="dropdown-item">Learning & Development</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-11 current_page_item active menu-item-29 nav-item">
<a title="Careers" href="http://careers.baffinland.com/" class="nav-link">Careers</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-30 nav-item">
<a title="Media Centre" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-30">Media Centre</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-30" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31 nav-item">
<a title="News Releases" href="http://www.baffinland.com/media-centre/news-releases/" class="dropdown-item">News Releases</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32 nav-item">
<a title="Media Gallery" href="http://www.baffinland.com/media-centre/media-gallery/" class="dropdown-item">Media Gallery</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33 nav-item">
<a title="Document Portal" href="http://www.baffinland.com/media-centre/document-portal/" class="dropdown-item">Document Portal</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-34 nav-item">
<a title="Contact Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-34">Contact Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-34" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-35" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35 nav-item">
<a title="Contact Information" href="http://www.baffinland.com/contact-us/contact-information/" class="dropdown-item">Contact Information</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
我将您的徽标放入“ nav”标签，也许这可以帮助您更多地了解。我建议复制这些模板之一，以便您的html结构可以使用。 https://getbootstrap.com/docs/4.4/components/navbar/
答案 1 :(得分：0)
好吧，在我添加固定顶部类之前，navbar-right起作用了，您可以禁用固定顶部并自己尝试...
无论如何，我确实尝试了您的解决方案，但没有成功。我非常感谢您的帮助。
我要做的是，我只是在navbar品牌上添加了正确的边距，然后将其推到我想要的位置