Header UI fixed on screen width greater than 640px and less than 900px

[HammadKhaan]

PR Title

Header UI fixed on screen width greater than 640px and less than 900px
The purpose of this Pull Request is to fix # 242

Description

When your screen width is less than 900px, a hamburger icon will be visible instead of whole navbar item contents, on clicking that hamburger icon then you will see the remaining content of navbar.

How you solved

Using media queries and TailwindCSS.

Screenshots

Checklist

• I have Made this contribution as per the CONTRIBUTING guide in this repo
• I have tested in local Environment.
• I have made the fix as per issue converstaion
• I have starred the repository ⭐

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
tailwindcss-ui-components	✅ Ready (Inspect)	Visit Preview	Oct 26, 2022 at 8:58AM (UTC)

[HammadKhaan]

@jsvigneshkanna Kindly review my PR, and merge it.

[jsvigneshkanna]

@HammadKhaan ,
Cant we make the change without touching tailwind config, as I suspect it would break somewhere where we are using sm/md stylings

[jsvigneshkanna]

For this type of issue, we could go with plain CSS

[HammadKhaan]

Sure @jsvigneshkanna. I am on it. I was hesitant use plain CSS. xD But I will take care of it now.

[jsvigneshkanna]

Great, BTW don't rely on single CSS framework as it backfires as sometime 🤣

It's better to have specific plain CSS styling for navbars alone than reflecting another component by modifying the tailwind config

[HammadKhaan]

@jsvigneshkanna Check now.

[jsvigneshkanna]

@HammadKhaan , can you try vercel preview link

I couldnt open hamburger menu in Ipad viewport(is it just for me?)

[HammadKhaan]

@HammadKhaan , can you try vercel preview link

I couldnt open hamburger menu in Ipad viewport(is it just for me?)

Working fine on my local environment, causing issue on vercel preview. I'll look into it.

[jsvigneshkanna]

Sure @HammadKhaan , please check and let me know if you are sure to merge this change

[HammadKhaan]

@jsvigneshkanna Check now, vercel preview also working fine. Merge it, if it is all okay on your end.

[jsvigneshkanna]

Sure @HammadKhaan , willl check in some time and let you know.
Please check other issues in mean time

[jsvigneshkanna]

@HammadKhaan Perfect working
Hope for more contributions from you!