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

• 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

1 Answer 1

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.