Creando la navbar

Curso Básico de Tailwind 2 y 3

Conociendo Tailwind CSS

Bienvenida al desarrollo con Tailwind

Tailwind 3.0: ¿qué hay de nuevo?

¿Cómo funciona Tailwind? Y otros frameworks de CSS

Mobile First y Utility First

Instalación y directivas

Creación del proyecto e instalación de Tailwind

Directivas de Tailwind

Utilidades

Nueva paleta de colores extendida

Medidas y Breakpoints

Flexbox

Maquetación del proyecto

Plugins

Forms, Typography y Aspect ratio

Personalización

Tailwind como API para la creación de un Design System

Proyecto: Platzi Travel

Construyendo el cuerpo del proyecto

Creando la sección de Home

Diseñando nuestras cards

Extracción de componentes a clases para nuestra card

Creando la sección de Recomendados

Agregando animaciones al proyecto

Creando la sección de Rentas destacadas

Sección de FAQS

Footer

TabBar funcional

Haciendo responsivo nuestro proyecto

Haciendo responsivo nuestro proyecto: rentas destacadas

Creando la navbar

Agregando el Dark Mode

Optimización de nuestro proyecto

Purge CSS

Cómo hacer la migración de tu proyecto a Tailwind 3.0

Conclusiones

Conclusiones y siguientes pasos

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to create an effective NavBar for your web project?

When building a website, the NavBar is one of the most important elements that ensures an optimal user experience. In this class, we will learn how to implement a functional and aesthetically pleasing NavBar, which not only improves navigation, but also complements the page design.

How to structure the NavBar?

The NavBar structure is divided into three essential parts to ensure its functionality:

Logo Div: This is the space intended for your website's logo, in this case, "Platzi Travel", which is inserted using a <p> tag.
```
<div class="height-auto width-auto"> <p class="text-xl text-primary font-black">PlatziTravel</p></div>.
```

Navigation div: Here we place the links that will direct users to the different sections of the page.

<div class="flex space-x-8"> <a href="#home" class="font-bold text-medium text-primary">Home</a>  <a href="#recommended" class="font-bold text-medium text-primary">Recommended</a> <a  href="#recommended" class="font-bold text-medium text-primary">Recommended</a> <a href="#rents" class="font-bold text-medium text-primary">Rents</a> <a href="#faqs" class="font-bold text-medium text-primary">FAQs</a> <a href="#about-us" class="font-bold text-medium text-primary">AboutUs</a></div>.

Icon Div: Interactive icons are placed here, such as search, Dark Mode and user profile.

<div class="flex space-x-4"> <!-- Search icon --> <svg class="fill-current text-primary" ...></svg> <!-- Dark Mode icon --> <svg class="fill-current text-primary" ...></svg> <!-- User icon --> <svg class="fill-current text-grey-300" ...></svg></div></div>

How to style the NavBar?

To make the NavBar look professional and fit the aesthetics of the page, it is important to apply styles such as display: flex, spacing, and consistent colors that align with the brand:

Flex and Spacing: use display: flex to arrange the NavBar elements. Add spacing with space-x-* to separate the icons properly.
Colors and Sizes: Adapt colors with Tailwind classes, for example, text-primary and text-grey-300, and change sizes with classes like text-xl and font-bold.

How to ensure that the NavBar is responsive and functional?

To ensure that the NavBar works correctly on different screen sizes, it is recommended to:

Disappear on mobile version: hide the NavBar on mobile devices and use it only for desktop.

.navbar { display: none; /* hidden by default */} }
 @media (min-width: 1024px) { .navbar { display: flex; /* visible on large screens */ } }}

Fixed position: Use position: fixed to make the NavBar scroll with the user when scrolling.
```
.navbar { position: fixed;}
```
Smooth navigation: Make sure that the links are correctly directed to the corresponding sections via IDs in the HTML.

What final adjustments need to be made?

Don't forget the details. Adjusting image sizes and paddings, such as changing the padding-top to center the content, can make a big difference in the final appearance of the project. In addition, sizing and spacing adjustments on images can significantly improve the user's visual experience.

With these well-defined steps, you will not only have an efficient NavBar, but also a complete and responsive design that meets your users' browsing expectations. Keep exploring and always implement new tools and concepts to keep your website on the cutting edge - stay motivated and keep learning! Next class we will explore the implementation of Dark Mode.

Contributions 12

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

Platzinauta

3 years ago

Código de mi navbar junto con la sección home:

    <nav class="w-full h-14 hidden bg-white lg:flex p-4 justify-between">
        <div class="h-auto w-auto">
            <p class="text-xl text-primary font-black">Platzi Travel</p>
        </div>
        <div class="flex space-x-8">
            <a class="font-bold text-base text-primary" href="#home">Inicio</a>
            <a class="font-bold text-base text-primary" href="#recomendados">Recomendados</a>
            <a class="font-bold text-base text-primary" href="#rentas_destacadas">Rentas</a>
            <a class="font-bold text-base text-primary" href="#faqs">FAQs</a>
            <a class="font-bold text-base text-primary" href="#sobre_nosotros">Sobre nosotros</a>
        </div>
        <div class="flex space-x-4">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="https://www.w3.org/2000/svg"><path class="fill-current text-primary" fill-rule="evenodd" clip-rule="evenodd" d="M8 3.99997C6.93913 3.99997 5.92172 4.4214 5.17157 5.17155C4.42143 5.92169 4 6.93911 4 7.99997C4 9.06084 4.42143 10.0783 5.17157 10.8284C5.92172 11.5785 6.93913 12 8 12C9.06087 12 10.0783 11.5785 10.8284 10.8284C11.5786 10.0783 12 9.06084 12 7.99997C12 6.93911 11.5786 5.92169 10.8284 5.17155C10.0783 4.4214 9.06087 3.99997 8 3.99997ZM2 7.99997C1.99988 7.05568 2.22264 6.12468 2.65017 5.28271C3.0777 4.44074 3.69792 3.71157 4.4604 3.1545C5.22287 2.59743 6.10606 2.22819 7.03815 2.07681C7.97023 1.92543 8.92488 1.99618 9.82446 2.28332C10.724 2.57046 11.5432 3.06587 12.2152 3.72927C12.8872 4.39266 13.3931 5.20531 13.6919 6.10111C13.9906 6.9969 14.0737 7.95056 13.9343 8.88452C13.795 9.81848 13.4372 10.7064 12.89 11.476L17.707 16.293C17.8892 16.4816 17.99 16.7342 17.9877 16.9964C17.9854 17.2586 17.8802 17.5094 17.6948 17.6948C17.5094 17.8802 17.2586 17.9854 16.9964 17.9876C16.7342 17.9899 16.4816 17.8891 16.293 17.707L11.477 12.891C10.5794 13.5293 9.52335 13.9081 8.42468 13.9861C7.326 14.0641 6.22707 13.8381 5.2483 13.3329C4.26953 12.8278 3.44869 12.063 2.87572 11.1223C2.30276 10.1816 1.99979 9.10141 2 7.99997Z" fill="#3F3F46"/></svg>
            <svg width="20" height="20" viewBox="0 0 29 29" fill="none" xmlns="https://www.w3.org/2000/svg"><path d="M25.0748 19.2748C22.9267 20.2465 20.5334 20.5405 18.214 20.1177C15.8945 19.6949 13.7589 18.5753 12.0918 16.9082C10.4246 15.241 9.30509 13.1055 8.88228 10.786C8.45946 8.46654 8.75347 6.0733 9.72512 3.92514C8.01494 4.69801 6.51777 5.87422 5.36208 7.35288C4.20638 8.83154 3.42666 10.5685 3.08979 12.4147C2.75293 14.261 2.86898 16.1614 3.428 17.9529C3.98702 19.7444 4.97232 21.3736 6.29935 22.7006C7.62639 24.0276 9.25556 25.0129 11.0471 25.572C12.8386 26.131 14.739 26.247 16.5852 25.9102C18.4315 25.5733 20.1684 24.7936 21.6471 23.6379C23.1257 22.4822 24.302 20.985 25.0748 19.2748V19.2748Z" fill="#CC2D4A"/></svg>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="https://www.w3.org/2000/svg"><path class="fill-current text-gray-300" fill-rule="evenodd" clip-rule="evenodd" d="M10 9C10.7956 9 11.5587 8.68393 12.1213 8.12132C12.6839 7.55871 13 6.79565 13 6C13 5.20435 12.6839 4.44129 12.1213 3.87868C11.5587 3.31607 10.7956 3 10 3C9.20435 3 8.44129 3.31607 7.87868 3.87868C7.31607 4.44129 7 5.20435 7 6C7 6.79565 7.31607 7.55871 7.87868 8.12132C8.44129 8.68393 9.20435 9 10 9ZM3 18C3 17.0807 3.18106 16.1705 3.53284 15.3212C3.88463 14.4719 4.40024 13.7003 5.05025 13.0503C5.70026 12.4002 6.47194 11.8846 7.32122 11.5328C8.1705 11.1811 9.08075 11 10 11C10.9193 11 11.8295 11.1811 12.6788 11.5328C13.5281 11.8846 14.2997 12.4002 14.9497 13.0503C15.5998 13.7003 16.1154 14.4719 16.4672 15.3212C16.8189 16.1705 17 17.0807 17 18H3Z" fill="#3F3F46"/></svg>
        </div>
    </nav>
    
    <section class="w-full lg:h-screen">
        <div class="lg:w-full lg:h-3/4" id="home">
            <div class="w-full lg:h-full">
                <div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center lg:space-y-0 lg:items-start lg:pt-48 lg:justify-start">
                    <input type="search" class="outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12 lg:hidden" placeholder="San Francisco" name="" id="">
                    <div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
                        <p class="text-4xl ml-16 font-bold text-black">Encuentra más ubicaciones como esta</p>
                    </div>
                    <button class="w-48 rounded-full text-lg text-primary shadow-sm font-semibold p-4 bg-white transition transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110 lg:ml-16">Explorar</button>
                </div>
                <div class="w-full h-full lg:h-full lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
                    <img class="lg:hidden" src="./img/sanFrancisco.jpg" alt="San Francisco City">
                </div>
            </div>
        </div>

César Andrés Aguilar Párraga

3 years ago

Si utilizaste fontawesome, aqui esta el navbar listico 😄

        <nav class="w-full h-14 hidden bg-white lg:flex lg:fixed lg:z-10 p-4 justify-between border-b-4 border-cyan-600">
            <div class="h-auto w-auto">
                <p class="text-xl text-primary font-black">Platzi Travel</p>
            </div>

            <div class="flex space-x-8">
                <a class="nav-items" href="#home">Inicio</a>
                <a class="nav-items" href="#recomendadas">Recomendados</a>
                <a class="nav-items" href="#rentas_destacadas">Rentas</a>
                <a class="nav-items" href="#faqs">FAQs</a>
                <a class="nav-items" href="#sobre_nosotros">Sobre nosotros</a>
            </div>
            <div class="flex space-x-4">
                <a href="">
                    <i class="nav-icons fa-search fa-solid"></i>
                </a>
                <a href="">
                    <i class="nav-icons fa-moon fa-solid"></i>
                </a>
                <a href="./registrationForm.html">
                    <i class="nav-icons fa-user fa-solid"></i>
                </a>
            </div>
        </nav>

la clases son

    .nav-items {
        @apply font-bold text-base text-primary
    }

    .nav-icons{
        @apply text-base text-primary
    }

Orlando Alonso Gonzales Paz

a year ago

Para los que tienen problemas con el nav, agreguen un "z-10" que es el z-index y pongame un bg-white a "nav" `

Raymondi Alejandro Ramos Vásquez

2 years ago

Uy el navbar con fixed da problemas 😦

Julian Franco

3 years ago

A mi por alguna razón no me toma el h-3/5 si le pongo h-96 funcioan sin problema

Any Omaña

12 days ago

Así se ve mi navbar 💚 ![](https://static.platzi.com/media/user_upload/image-41ee88e9-990b-471d-a8b8-ed40f9a5fdc1.jpg) Aquí dejo mi repositorio con el proyecto en Github por si necesitan guiarse en algo: <https://github.com/iamanyyeei/HelloTravel-Tailwind-CSS>

Joan Alexander Valerio Rodríguez

10 months ago

Sugerencia.. para aquellos que terminaron esta implementación y utilizaron la propiedad h-screen en un tag 🤨.. Les recomiendo ver lo que le paso al footer en modo desktop 🧐 Hay un choque de clases... cuidado con eso

Pablo Alejandro Figueroa

a year ago

<https://play.tailwindcss.com/AfEs4IEPxD?size=1150x1355>

CLAUDIA ANDREA CAMPO GRIJALBA

a year ago

```html <section class="w-full h-auto">

Encuentra más ubicaciones como esta

<button class=" w-48 text-lg text-primary font-semibold p-4 bg-white rounded-full shadow-sm lg:ml-16 transition duration-500 ease-in-out hover:bg-primary hover:text-white hover:translate-y-1 hover:scale-110" > Explorar </button>

```Lo solucione asi, porque no me funcionaba lo de cambiar el h-96 por h-full en lg version. Si le ocurrio a alguien más aqui esta mi solución