html - 导航问题 - 固定顶部打破导航栏右侧并覆盖徽标

Question

我为此页面使用引导导航 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> -->

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 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 &amp; Monitoring" href="http://www.baffinland.com/operation/shipping-and-monitoring/" class="dropdown-item">Shipping &amp; 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 &amp; Safety" href="http://www.baffinland.com/sustainability/health-and-safety/" class="dropdown-item">Health &amp; 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 &amp; Development" href="http://www.baffinland.com/sustainability/learning-and-development/" class="dropdown-item">Learning &amp; 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>

我将您的徽标放入“导航”标签中，也许这可以帮助您进一步了解。我建议复制这些模板之一，以便您的 html 结构可以正常工作。https://getbootstrap.com/docs/4.4/components/navbar/