How to center the logo both on landing and home page, tailwind

I am trying to centre my logo on my landing page. In the first photo there is the landing page, while in the second is the home page when the user logs in. I managed to centre my logo on the home page since it is between two elements: the menu button and login button, while in my landing page there is no login button and that is why it is moved toward right more.

How can I centre it both on the landing and home page?

Here is the code:

 <div class="bg-gray-100">
            <nav class="bg-green-400 min-h-3/5 p-2">
                <!-- Primary Navigation Menu -->
<!--                <div class="">-->
                    <div class="container flex flex-row">
                        <div class="dropdown justify-content-left pt-2 mt-3 w-1/4">
                            <button class="btn text-white py-2 px-4" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="text-2xl">MENU</span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                <li><a class="dropdown-item" href="/dashboard">Home</a></li>
                                <li><a class="dropdown-item" href="/home">Check up</a></li>
                            </ul>
                        </div>
                        <div class="logo text-center justify-center m-auto pt-2 grow">
                            <a href="/dashboard" class="no-underline hover:no-underline"><img src="/images/ecology.png" alt="logo"><span class="no-underline text-white text-xl font-bold hover:no-underline">TSM</span></a>
                        </div>      
                        <div class="hidden sm:flex sm:items-center pr-3 w-1/4 justify-end" v-if="$page.props.user">
                            <div class="ml-3 relative" >
                                <!-- Teams Dropdown -->
                                <jet-dropdown align="right" width="60" v-if="$page.props.jetstream.hasTeamFeatures">
                                    <template #trigger>
                                       <span class="inline-flex rounded-md">
                                           <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-xl leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
                                               {{ $page.props.user.current_team.name }}

                                               <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                                   <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                               </svg>
                                           </button>
                                       </span>
                                    </template>

tykus

4 years ago

Level 104

Use grid and grid-cols-3 as the container classes (rather than flex and flex-row). The children will fill the width of the parent, so no w- utilities are required on the children.

<div class="grid grid-cols-3 h-24">
  <div class=""><!-- MENU --></div>
  <div class=""><!-- LOGO --></div>
  <div class="">
    <div class="hidden sm:flex sm:items-center pr-3 w-1/4 justify-end" v-if="$page.props.user">
      <!-- all markup for auth user menu -->
    </div>
  </div>
</div>

Inside the last child div; you can conditionally render the authenticated user menu

TikTina

4 years ago

Level 1

@tykus Now it messed the other two elements: https://imgur.com/a/ElvVFbV

tykus

4 years ago

Level 104

@TikTina messed up how?

It looks like you have a container somewhere that is constraining the width of the nav, or one of its children? How have you incorporated the grid like I described above?

TikTina

4 years ago

Level 1

@tykus I deleted the container that was in the main div and put it as you wrote above...but it s the same as in these two new images I posted.

jlrdw

4 years ago

Level 75

@TikTina is Mix setup correctly and reflecting changes you make, otherwise are you clearing browser cache?

2 likes

tykus

4 years ago

Best Answer

Level 104

@TikTina my sample code was hardly "feature complete", you were expected to extrapolate!!!

You need the container and mx-auto classes to set the width and margins around the first div under the nav element. This element should also get grid and grid-cols-3.

Finally, the alignment within the three children should be left, center, and right respectively; left is default, so nothing needed. For the others, this can be achieved using flex along with justify-center and justify-end respectively. This will involve moving some of the classes up to the grid item (child) div

1 like

TikTina

4 years ago

Level 1

@tykus Thank you, I am feel sorry for bothering you : )

Please or to participate in this conversation.