CODEWITHSUNDEEP
htmltailwind-css
ussrback
ussrback

Reputation: 611

DIV alignments using Tailwind CSS


I have two **div**'s: one for logo and another for menu, they are aligned using **flex**.
When I start decreasing the screen size, menu **div** starts shrinking until some point, when one of the menu item (ABOUT US) looses alignment.
Then logo-**div** starts shrinking until the menu disappears. Please advice, how can I keep the menu item (ABOUT US) inline until the menu completely disappears and how can I make logo-**div** occupy full width and centered when menu is not visible?

Screen Visualisation:

enter image description here

HTML code:

<nav class="item-center flex items-center">
                <div class="bg-red-100 pl-5 py-1">
                    <a href="#"><img src="img/logo.svg" alt="Logo"></a>
                </div>
                <div class="flex-1">
                <ul class="hidden sm:flex bg-blue-200 justify-end gap-12 text-red-500 uppercase text-s pr-5">
                    <li class="cursor-pointer ">Features </li>
                    <li class="cursor-pointer ">Products </li>
                    <li class="cursor-pointer ">Services </li>
                    <li class="cursor-pointer ">About us </li>
                    <li class="cursor-pointer ">Contact </li>
                </ul>
            </div>
            </nav>

Upvotes: 0

Views: 244

Answers (3)

MrPatel2021
MrPatel2021

Reputation: 211

I try to resolve your problem, check here

Upvotes: 1

Емил Цоков
Емил Цоков

Reputation: 692

About wrapping

    <li class="cursor-pointer whitespace-nowrap">About us </li>

and about small screen check https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint and

    <div class="flex bg-red-100 pl-5 py-1 sm:pl-0 sm:w-full sm:justify-center">
  <a href="#"><img src="img/logo.svg" alt="Logo"></a>
</div>

Upvotes: 0

Sead
Sead

Reputation: 190

I'd use whitespace-nowrap class for about us section and first thing that comes to my mind for logo is to add a minimum width to it, and flex grow, so that it can't go below certain width and once the menu disappears that it grows to the full width.

Upvotes: 0

Related Questions