Improving responsiveness
Our navbar and its animation look really good on large screens. However, they require improvements in mobile view.
Step 1 - initialize Collapse
First we need to add Collapse to the JavaScript initialization
so that in the mobile view our navbar can be expanded.
It's simple - just add Collapse to the initialization in the
src/js.index.js file:
// Initialization for ES Users
import { Carousel, Collapse, initTWE } from 'tw-elements';
initTWE({ Carousel, Collapse });
Now when you reduce the screen width and click on the hamburger icon, you will be able to expand the navbar in mobile form.
Step 2 - create new .mobile-only class
To make our navbar work perfectly on both large and small screens, we will need to create a custom Tailwind class.
By default, breakpoints in Tailwind are set from the minimum width - e.g.
breakpoint md means min-width: 768px . This would
be hard to use in our situation, so we need a class that will work for
screens smaller than about 992px.
So open the tailwind.config.cjs file (you will find it in the
root folder of your project) and update it as below, adding the
.mobile-only class to the configuration:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js'],
plugins: [require('tw-elements/dist/plugin.cjs')],
darkMode: 'class',
theme: {
extend: {
screens: {
'mobile-only': { 'max': '991.98px' },
},
},
},
};
Step 3 - add .mobile-only to the navbar
Now let's add white background to the navbar by default but only on mobile (so when our navbar is collapsed).
To do this, we need to add the .mobile-only:bg-white class to
the navbar element:
<!-- Navbar -->
<nav
id="animated-navbar"
class="mobile-only:bg-white flex-no-wrap fixed top-0 z-10 flex w-full items-center justify-between py-2 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4">
[...]
</nav>
Now when you reduce the screen width below 992px you will see
that it becomes white.
But we have a new problem - icons disappear. This is because they are white by default, so they are completely invisible on a white background.
Let's fix this in the next step.
Step 4 - update icons
We also need to change the color of the icons only in the mobile view. So
let's add a class .mobile-only:text-neutral-500 to each
<a> element inside
<div id="navbar-icons">:
<!-- Right elements -->
<div id="navbar-icons" class="relative flex items-center">
<!-- YouTube Icon -->
<a
class="mobile-only:text-neutral-500 me-4 text-white transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
href="#">
[...]
</a>
[...]
</div>
Now when you reduce the screen width you will see that the icons are visible again.
Let's take this opportunity and add additional padding in the mobile view to the div containing the icons. This will make them look better:
<!-- Right elements -->
<div id="navbar-icons" class=" mobile-only:py-2 relative flex items-center">
[...]
</div>
Step 5 - update Animated Navbar script
We need to make sure that our script adding and removing classes in the
navbar will only work on wide screens. We don't want to risk unexpected bugs
in the mobile view, so let's add a condition that the script should be
executed on screens larger than 992px:
// Initialization for ES Users
import { Carousel, Collapse, initTWE } from 'tw-elements';
initTWE({ Carousel, Collapse });
// Animated navbar
const animatedNavbar = document.getElementById('animated-navbar');
const navbarIcons = document.getElementById('navbar-icons');
const navIconLinks = navbarIcons.querySelectorAll('a');
window.addEventListener('scroll', function () {
if (window.scrollY > 0 && window.innerWidth >= 992) {
animatedNavbar.classList.add('bg-white');
animatedNavbar.classList.remove('lg:py-4');
animatedNavbar.classList.add('lg:py-5');
navIconLinks.forEach((link) => {
link.classList.remove('text-white');
link.classList.add('text-neutral-500');
});
} else if (window.innerWidth >= 992) {
animatedNavbar.classList.remove('bg-white');
animatedNavbar.classList.remove('lg:py-5');
animatedNavbar.classList.add('lg:py-4');
navIconLinks.forEach((link) => {
link.classList.add('text-white');
link.classList.remove('text-neutral-500');
});
}
});
About author
Michal Szymanski
Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.