Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 26, 2020 02:16 am GMT

Style a responsive navbar component with Tailwind CSS

In this tutorial well be building a responsive navbar using the Tailwind CSS framework. Unlike other CSS frameworks Tailwind doesnt include any pre-built components but rather allows you to design and build custom components using utility classes.

The finished product will look like the following:

Alt Text

For the purposes of this tutorial well install Tailwind using a CDN but in production environments its recommend to install Tailwind as a PostCSS plugin.

Lets get started by creating a HTML file with the following markup:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Responsive Navbar - Tailwind CSS</title>    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />        </head>  <body>    <!-- navbar here -->          <script src="script.js"></script>  </body></html>
Enter fullscreen mode Exit fullscreen mode

First is the navbar wrapper element:

<nav class="flex flex-wrap items-center justify-between p-5 bg-blue-200">      <!-- logo --><!-- hamburger --><!-- links --><!-- cta --></nav>
Enter fullscreen mode Exit fullscreen mode
  • flex flex-wrap display using flexbox and wrap items larger than the parent.
  • items-center align items along the center of the x-axis.
  • justify-between evenly distributes navbar elements across the horizontal axis.
  • p-5 adds even padding to all sides of the navbar, size of the padding can be adjusted by changing the number from anywhere between 0 and 10.
  • bg-blue-200 sets the background color blue, tone of color can be adjusted by changing the number from 50 then at multiples of 100 up to 900.

The first element in the navbar is a logo which doesnt require any CSS:

<img src="http://acmelogos.com/images/logo-1.svg" alt="ACME" width="120" />
Enter fullscreen mode Exit fullscreen mode

Next comes the hamburger button for toggling the menu visibility on small screens:

<div class="flex md:hidden">  <button id="hamburger">    <img class="toggle block" src="https://img.icons8.com/fluent-systems-regular/2x/menu-squared-2.png" width="40" height="40" />    <img class="toggle hidden" src="https://img.icons8.com/fluent-systems-regular/2x/close-window.png" width="40" height="40" />  </button></div>
Enter fullscreen mode Exit fullscreen mode

Tailwind CSS follows the mobile-first approach, so we build from small to larger screens. In this instance the hamburger is visible on small screens (flex) then hidden on medium (md:hidden) and above sized screens.

Weve also used a toggle class here that isnt actually part of Tailwind. This class will be applied to everything that we want to toggle the visibility of when the hamburger button is clicked.

Text links have a wrapper <div> once again using toggle:

<div class="toggle hidden md:flex w-full md:w-auto text-right text-bold mt-5 md:mt-0 border-t-2 border-blue-900 md:border-none">          <a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Home</a>  <a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Products</a>  <a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Pricing</a>  <a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Contact</a></div>
Enter fullscreen mode Exit fullscreen mode

Firstly lets go over the classes used on the wrapper <div> element:

  • hidden md:flex links are hidden on smaller screens until the visibility is toggled via the hamburger button.
  • w-full md:w-auto display the menu as full width on small screens only.
  • text-right text-bold right align the text with a bold font weight.
  • mt-5 md:mt-0 applies a margin to the top of the menu.
  • border-t-2 border-blue-900 md:border-none single blue 2px dividing border on the top of the menu on smaller screens thats removed on larger screens.

And the individual text links:

  • block md:inline-block display as block (full width) on small screens and inline on larger screens.
  • text-blue-900 hover:text-blue-500 hover styles in Tailwind are applied by pre-pending the desired style with hover.
  • px-3 py-3 even padding on both the x-axis (horizontal) and y-axis (vertical).
  • border-b-2 border-blue-900 md:border-none blue 2px border on the bottom of each of the links on small screens only.

Finally well include a CTA button to the far right of the navbar:

<a href="#" class="toggle hidden md:flex w-full md:w-auto px-4 py-2 text-right bg-blue-900 hover:bg-blue-500 text-white md:rounded">Create Account</a>
Enter fullscreen mode Exit fullscreen mode

The only class we havent used previously is md:rounded which applies a border radius giving the button corners a slightly rounded appearance.

That completes the CSS now we just need to add the JavaScript to toggle the menu visibility on small screens. Create a script.js file with the following:

document.getElementById("hamburger").onclick = function toggleMenu() {  const navToggle = document.getElementsByClassName("toggle");  for (let i = 0; i < navToggle.length; i++) {    navToggle.item(i).classList.toggle("hidden");  }};
Enter fullscreen mode Exit fullscreen mode

This code toggles the hidden class on each toggle element when the hamburger is clicked.

You should now be able to style your own responsive navbar using Tailwind CSS. If you would like to learn more about Tailwind and all the available classes the official documentation is very user friendly.


Original Link: https://dev.to/michaelburrows/style-a-responsive-navbar-component-with-tailwind-css-640

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To