html - Navbar links position got pushed away from the middle - Stack Overflow

admin管理员组

文章数量:1405613

Does anyone know why the navbar links position got pushed away and not perfectly centered due to I added log in and sign up button?

This is the code :

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav"
            aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="fa fa-bars"></span> Menu
        </button>

        <div class="collapse navbar-collapse" id="ftco-nav">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item <?= (current_url() == base_url('home')) ? 'active' : '' ?>">
                    <a href="<?= base_url('home') ?>" class="nav-link">Home</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('contact')) ? 'active' : '' ?>">
                    <a href="<?= base_url('contact') ?>" class="nav-link">Contact</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('dashboard')) ? 'active' : '' ?>">
                    <a href="<?= base_url('dashboard') ?>" class="nav-link">Dashboard</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('dashboardF')) ? 'active' : '' ?>">
                    <a href="<?= base_url('dashboardF') ?>" class="nav-link">Firebase Testing</a>
                </li>
            </ul>

            <div class="d-flex ms-auto">
                <a href="<?= base_url('login') ?>" class="btn btn-outline-light me-2">Log In</a>
                <a href="<?= base_url('signup') ?>" class="btn btn-primary">Sign Up</a>
            </div>
        </div>
    </div>
</nav>

Does anyone know why the navbar links position got pushed away and not perfectly centered due to I added log in and sign up button?

This is the code :

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav"
            aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="fa fa-bars"></span> Menu
        </button>

        <div class="collapse navbar-collapse" id="ftco-nav">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item <?= (current_url() == base_url('home')) ? 'active' : '' ?>">
                    <a href="<?= base_url('home') ?>" class="nav-link">Home</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('contact')) ? 'active' : '' ?>">
                    <a href="<?= base_url('contact') ?>" class="nav-link">Contact</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('dashboard')) ? 'active' : '' ?>">
                    <a href="<?= base_url('dashboard') ?>" class="nav-link">Dashboard</a>
                </li>
                <li class="nav-item <?= (current_url() == base_url('dashboardF')) ? 'active' : '' ?>">
                    <a href="<?= base_url('dashboardF') ?>" class="nav-link">Firebase Testing</a>
                </li>
            </ul>

            <div class="d-flex ms-auto">
                <a href="<?= base_url('login') ?>" class="btn btn-outline-light me-2">Log In</a>
                <a href="<?= base_url('signup') ?>" class="btn btn-primary">Sign Up</a>
            </div>
        </div>
    </div>
</nav>

• html
• css
• bootstrap-5

Share Improve this question Follow asked Mar 22 at 17:12 Ruby CalderonRuby Calderon 1311 silver badge22 bronze badges 1

• 1 This is happening because setting the horizontal margin to auto will position the element within the available width. ul will be positioned in the center of the available width, after subtracting the space the login button takes up. – Melvin Kosisochukwu Commented Mar 22 at 17:29

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This issue happens because mx-auto centers the nav links only when there's equal space on both sides. When you use ms-auto to push the Log in/Sign up buttons to the right, it breaks that balance and your links shift off center.

Replace the line:

<div class="d-flex ms-auto">

with this:

<div class="d-flex position-absolute top-0 end-0 mt-2 me-3">

This way, the buttons are anchord to the top-right corner usng absolute positioning, and your nav links stay perfectly entered inside the flex container.

本文标签： htmlNavbar links position got pushed away from the middleStack Overflow