A
Anonymous

Header - Copy this React, Tailwind Component to your project

After nav bar i need background image it means i have create navbar under ths navbar background i need image but nav bar should be fixed their and background image will expand how it is possible.import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Dropdown } from 'react bootstrap'; import logo from "../src/images/logo.png"; import "../src/header.css" const Header = () => { return ( <nav className="navbar navbar expand lg navbar dark "> <div className="container fluid conatin"> <a className="navbar brand" href="#"> <img src={logo} alt="Logo" style={{ height: '40px' }} /> </a> <button className="navbar toggler" type="button" data bs toggle="collapse" data bs target="#navbarNav" aria controls="navbarNav" aria expanded="false" aria label="Toggle navigation" > <span className="navbar toggler icon"></span> </button> <div className="collapse navbar collapse" id="navbarNav"> <ul className="navbar nav"> <li className="nav item"> <a className="nav link" href="#"> Home </a> </li> <li className="nav item"> <a className="nav link" href="#"> About </a> </li> <li className="nav item ford"> <a className="nav link change" href="#"> Book an Appointment </a> </li> <li className="nav item dropdown"> <Dropdown> <Dropdown.Toggle variant="dark" id="dropdown basic"> Fertility Services </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item href="#">Service 1</Dropdown.Item> <Dropdown.Item href="#">Service 2</Dropdown.Item> <Dropdown.Item href="#">Service 3</Dropdown.Item> </Dropdown.Menu> </Dropdown> </li> </ul> </div> </div> </nav> ); }; export default Header;

Prompt
Component Preview

About

Header - A responsive navbar with a fixed position, logo, dropdown menu, and expandable background image, built with React and Tailwin. Download code free!

Share

Last updated 1 month ago