Tailwind CSS center horizontally in navbar

Question

Using the default tailwindcss navbar in Laravel Breeze, I want to center the application logo, whilst having navigation links on the far left and right of it. There will be three navigation links on one side, and just two on the other, so flex-between won't work properly. Any ideas how to do it? Here is the entire default navbar, and how it currently looks.

<nav x-data="{ open: false }" class="bg-white border-b border-gray-100 py-6">
    <!-- Primary Navigation Menu -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">        
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ route('index') }}">
                        <x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
                    </a>
                </div>
                
                <!-- Navigation Links -->
                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                    <x-nav-link :href="route('index')" :active="request()->routeIs('index')">
                        {{ __('Home') }}
                    </x-nav-link>
                    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                        {{ __('Occupational Health') }}
                    </x-nav-link>
                    <x-nav-link :href="route('bookings')" :active="request()->routeIs('bookings')">
                        {{ __('Inquiry') }}
                    </x-nav-link>                   
                </div>
            </div>            

            <!-- Settings Dropdown -->
            <div class="hidden sm:flex sm:items-center sm:ml-6">                
                @guest
                    @if (Route::has('login'))
                    @endif
                @else
                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
                            <div>{{ Auth::user()->name }}</div>

                            <div class="ml-1">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <!-- Authentication -->
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-dropdown-link :href="route('logout')"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                                {{ __('Log Out') }}
                            </x-dropdown-link>
                        </form>
                    </x-slot>
                </x-dropdown>
                @endguest
            </div>

            <!-- Hamburger -->
            <div class="-mr-2 flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    @guest 
        @if (Route::has('login'))
        @endif
    @else 
    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <x-responsive-nav-link :href="route('index')" :active="request()->routeIs('index')">
                {{ __('Home') }}
            </x-responsive-nav-link>
            <x-responsive-nav-link :href="route('bookings')" :active="request()->routeIs('bookings')">
                {{ __('Bookings') }}
            </x-responsive-nav-link>
            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                {{ __('Dashboard') }}
            </x-responsive-nav-link>
        </div>

        <!-- Responsive Settings Options -->
        <div class="pt-4 pb-1 border-t border-gray-200">
            <div class="px-4">
                <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
            </div>

            <div class="mt-3 space-y-1">
                <!-- Authentication -->
                <form method="POST" action="{{ route('logout') }}">
                    @csrf

                    <x-responsive-nav-link :href="route('logout')"
                            onclick="event.preventDefault();
                                        this.closest('form').submit();">
                        {{ __('Log Out') }}
                    </x-responsive-nav-link>
                </form>
            </div>
        </div>
        @endguest
    </div>
</nav>

your best option would be to have 3 containers inside your nav. One for the left side navigation, one for the logo and one for the right side items. You then have flex-start on the left side container, center on the logo, flex-end on the right side container and a between on the navbar itself, or you could make the containers be 1/3rd each in width and skip having between on the navbar. Whatever you prefer. — Martin, Aug 01 '21 at 15:54
@Martin Thank you man, the container w-1/3 fixed it for me! I will answer this question, but credit you're answer! — Thomas Read, Aug 01 '21 at 19:08

score 1 · Accepted Answer · answered Aug 01 '21 at 19:12

Thank you to Martin for helping me solve this!

Each section of the navbar was split into containers of width 1/3, and the logo centered in its container, similar to this:

 <div class="flex">
     <!-- Navigation Links -->
     <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex sm:w-1/3">
         <x-nav-link :href="route('index')" active="request()->routeIs('index')">
             {{ __('Home') }}
         </x-nav-link>
         <x-nav-link class="text-center" :href="route('dashboard')" :active="request()->routeIs('dashboard')">
             {{ __('Occupational Health') }}
         </x-nav-link>
         <x-nav-link :href="route('bookings')" :active="request()->routeIs('bookings')">
             {{ __('Inquiry') }}
         </x-nav-link>                   
     </div>
 </div>  
            
 <div class="flex w-1/3 justify-center">
     <!-- Logo -->
     <div class="flex-shrink-0 flex items-center">
         <a href="{{ route('index') }}">
             <x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
         </a>
     </div>
 </div>       
            
 <div class="hidden sm:flex w-1/3 justify-end">
     <x-nav-link :href="route('bookings')" :active="request()->routeIs('bookings')">
         {{ __('Inquiry') }}
     </x-nav-link> 
  </div>

Tailwind CSS center horizontally in navbar

1 Answers1