2021-08-26
2201
#css
Hulya Karakaya
64375
Aug 26, 2021 ⋅ 7 min read

Building a responsive navbar in Tailwind CSS

Hulya Karakaya A frontend developer interested in open source and building amazing websites. I believe in building through collaboration and contribution.

Recent posts:

Managing Search Parameters In Next.js With Nuqs

Managing search parameters in Next.js with nuqs

Optimize search parameter handling in React and Next.js with nuqs for SEO-friendly, shareable URLs and a better user experience.

Jude Miracle
Nov 27, 2024 ⋅ 10 min read
React logo over a beige background

Data fetching with Remix’s loader function

Learn how Remix enhances SSR performance, simplifies data fetching, and improves SEO compared to client-heavy React apps.

Abhinav Anshul
Nov 26, 2024 ⋅ 5 min read
Top 8 Fullstory Competitors And Alternatives

Top 8 Fullstory competitors and alternatives

Explore Fullstory competitors, like LogRocket, to find the best product analytics tool for your digital experience.

Jeff Wharton
Nov 26, 2024 ⋅ 13 min read

Adapting to user motion and theme preferences with CSS and JavaScript

Learn how to balance vibrant visuals with accessible, user-centered options like media queries, syntax, and minimized data use.

Oscar Jite-Orimiono
Nov 25, 2024 ⋅ 5 min read
View all posts

4 Replies to "Building a responsive navbar in Tailwind CSS"

  1. This is bs. This is not responsive navbar. A responsive navbar would switch the color of the page you are on after you click on it. This is a hovering effect, not responsive. Please tell me what is so responsive about this? Total waste of my time setting this all up. If I wanted a hover effect, I couldve just implemented it. Responsive in my eyes is when you click the button, the button lights up to tell you which page your on.

    1. “Responsive” means the component behaves correctly when the screen size changes. e.g. a navbar turns into a hamburger menu on mobile instead of running miles off the side of the page.

      Responsive has nothing to do with spiffing effects like color changes.

      The only total waste of time around here is the energy you spent spouting off at something because you didn’t have the requisite knowledge to understand what’s going on. Be more polite to those that have provided free information that is actually useful to those who know what’s going on.

  2. Hi,
    I’m refactoring an Aurelia 1x app to htmx and using tailwindcss when I thankfully found this post. My routes are parital re-loads and not full page reloads. When in mobile mode I’d like to toggle menu off after making a menu selection which I know is just missing some extra javascript code. Any assistance appeciated,
    Thanks for this terrific post.
    John


    works


Leave a Reply