flyonui/components/navbar.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.navbar{background-color:var(--color-base-100);align-items:center;width:100%;padding-block:.75rem;padding-inline:1.5rem;display:flex}.navbar-start{justify-content:flex-start;width:50%;display:flex}.navbar-center{flex-shrink:0}.navbar-end{justify-content:flex-end;width:50%;display:flex}@media (width>=640px){.sm\:navbar{background-color:var(--color-base-100);align-items:center;width:100%;padding-block:.75rem;padding-inline:1.5rem;display:flex}.sm\:navbar-start{justify-content:flex-start;width:50%;display:flex}.sm\:navbar-center{flex-shrink:0}.sm\:navbar-end{justify-content:flex-end;width:50%;display:flex}}@media (width>=768px){.md\:navbar{background-color:var(--color-base-100);align-items:center;width:100%;padding-block:.75rem;padding-inline:1.5rem;display:flex}.md\:navbar-start{justify-content:flex-start;width:50%;display:flex}.md\:navbar-center{flex-shrink:0}.md\:navbar-end{justify-content:flex-end;width:50%;display:flex}}@media (width>=1024px){.lg\:navbar{background-color:var(--color-base-100);align-items:center;width:100%;padding-block:.75rem;padding-inline:1.5rem;display:flex}.lg\:navbar-start{justify-content:flex-start;width:50%;display:flex}.lg\:navbar-center{flex-shrink:0}.lg\:navbar-end{justify-content:flex-end;width:50%;display:flex}}@media (width>=1280px){.xl\:navbar{background-color:var(--color-base-100);align-items:center;width:100%;padding-block:.75rem;padding-inline:1.5rem;display:flex}.xl\:navbar-start{justify-content:flex-start;width:50%;display:flex}.xl\:navbar-center{flex-shrink:0}.xl\:navbar-end{justify-content:flex-end;width:50%;display:flex}}@media (width>=1536px){.\32 xl\:navbar{background-color:var(--color-base-100);align-items:center;width:100%;padding-block:.75rem;padding-inline:1.5rem;display:flex}.\32 xl\:navbar-start{justify-content:flex-start;width:50%;display:flex}.\32 xl\:navbar-center{flex-shrink:0}.\32 xl\:navbar-end{justify-content:flex-end;width:50%;display:flex}}}