I'll appreciate help with my bug. I have a ReactJS and TailwindCSS application. The navigation displays fine in desktop mode but in mobile mode, the navigation or hamburger icon doesn't appear.
My App.jsx file is in the path: travelworld/src/component/Navbar.jsx
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { FaTimes, FaBars } from 'react-icons/fa'
const Navbar = () => {
const [showNavigationForMobile, setShowNavigationForMobile] = useState(false);
return (
<nav className='fixed m-4 top-0 right-0 left-0 shadow-lg z-50 bg-white'>
<div className='container px-4 flex justify-between items-center h-16'>
<h3 className='text-2xl font-bold'>Travel</h3>
{!showNavigationForMobile && (
<div className='md:show flex space-x-4 text-sm font-bold items-center'>
<Link to="/" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Home</Link>
<Link to="/gallery" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Gallery</Link>
<Link to="/contact" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Contact</Link>
<Link to="/about" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>About</Link>
<button className='py-2 px-6 border bg-gray-400'>Login</button>
</div>
)}
<div className='md:hidden'>
<button onClick={() => setShowNavigationForMobile(!showNavigationForMobile)}>
{showNavigationForMobile ? <FaTimes /> : <FaBars />}
</button>
</div>
</div>
{showNavigationForMobile && (
<div className='flex space-y-6 py-4 flex-col bg-white items-center'>
<Link to="/" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Home</Link>
<Link to="/gallery" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Gallery</Link>
<Link to="/contact" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Contact</Link>
<Link to="/about" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>About</Link>
<button className='py-2 px-6 border bg-gray-300'>Login</button>
</div>
)}
</nav>
)
}
export default Navbar
My Home.jsx file is in the path: travelworld/src/pages/Home.jsx
import React from "react";
import PopularDestination from '../component/PopularDestination';
import Services from '../component/Services';
import Clients from '../component/Clients';
const Home = () => {
return (
<>
<div className='relative h-screen bg-cover bg-center' style={{backgroundImage : "url('/images/hotel_paris.jpg')"}}>
<div className='absolute inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center'>
<h1 className='text-4xl md:text-6xl font-bold text-white mb-4'>Explore the world with us</h1>
<p className='text-lg md:text-2xl text-white mb-8'>Discover amazing places at exclusive deals</p>
<button className='border text-white px-6 py-2 rounded-full text-lg md:text-xl hover:bg-blue-500 transform transition duration-300 hover:scale-105'>Get started</button>
</div>
</div>
<PopularDestination />
<Services />
<Clients />
</>
);
}
export default Home;
My App.jsx file is in the path: travelworld/src/App.jsx
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Navbar from "./component/Navbar";
const App = () => {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
</BrowserRouter>
);
};
export default App;
My package.json file is in the path: travelworld/package.json
{
"name": "travelworld",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-router-dom": "^6.26.0"
},
"devDependencies": {
"@eslint/js": "^9.8.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"eslint": "^9.8.0",
"eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"postcss": "^8.4.41",
"tailwindcss": "^3.4.9",
"vite": "^5.4.0"
}
}
I have just reproduced your code on my end and I found where your bug is lurking. The bug is in the div that has md:show. That class name isn't a valid Tailwind class. Also, you're not hiding that navigation on mobile screen breakpoint. Tailwind is mobile-first, so the flex class is going to propagate to all the breakpoints considering the md:show class isn't valid. I have made adjustment to your code and this should fix your issue:
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { FaTimes, FaBars } from "react-icons/fa";
const Navbar = () => {
const [showNavigationForMobile, setShowNavigationForMobile] = useState(false);
return (
<nav className="fixed m-4 top-0 right-0 left-0 shadow-lg z-50 bg-white">
<div className="container px-4 flex justify-between items-center h-16">
<h3 className="text-2xl font-bold">Travel</h3>
{!showNavigationForMobile && (
<div className="hidden md:flex space-x-4 text-sm font-bold items-center">
<Link
to="/"
className="px-6 py-2 hover:bg-gray-600 hover:text-white"
>
Home
</Link>
<Link
to="/gallery"
className="px-6 py-2 hover:bg-gray-600 hover:text-white"
>
Gallery
</Link>
<Link
to="/contact"
className="px-6 py-2 hover:bg-gray-600 hover:text-white"
>
Contact
</Link>
<Link
to="/about"
className="px-6 py-2 hover:bg-gray-600 hover:text-white"
>
About
</Link>
<button className="py-2 px-6 border bg-gray-400">Login</button>
</div>
)}
<div className="md:hidden">
<button
onClick={() => setShowNavigationForMobile(!showNavigationForMobile)}
>
{showNavigationForMobile ? <FaTimes /> : <FaBars />}
</button>
</div>
</div>
{showNavigationForMobile && (
<div className="flex space-y-6 py-4 flex-col bg-white items-center">
<Link to="/" className="px-6 py-2 hover:bg-gray-600 hover:text-white">
Home
</Link>
<Link
to="/gallery"
className="px-6 py-2 hover:bg-gray-600 hover:text-white"
>
Gallery
</Link>
<Link
to="/contact"
className="px-6 py-2 hover:bg-gray-600 hover:text-white"
>
Contact
</Link>
<Link
to="/about"
className="px-6 py-2 hover:bg-gray-600 hover:text-white"
>
About
</Link>
<button className="py-2 px-6 border bg-gray-300">Login</button>
</div>
)}
</nav>
);
};
export default Navbar;