Responsive Navbar with ReactJS, HTML, and CSS

This project demonstrates the implementation of a responsive navigation bar using ReactJS, HTML, and CSS. The design is responsive and adaptable to various screen sizes, making it suitable for all types of devices.

Features

• Responsive Design: The navigation bar is designed to be responsive and work seamlessly on different screen sizes, from desktops to mobile devices.

• Flexbox Layout: Flexbox is utilized to create a flexible and dynamic layout, ensuring the navbar adjusts its structure based on the available space.

• Menu Options on Right: By default, the menu options are positioned on the right side of the navbar for a clean and modern look.

Usage

1. Clone the repository:

   git clone https:githubcomharshatechtrainings/reactjs-responsive-navbar-flexbox-html-css.git

2. Initiate the project

   git intall

3. Navigate to the project directory

   cd reactjs-responsive-navbar-flexbox-html-css

4. Run the React development server

   npm start

Menu on Left

1. Replacement below code in reactjs-responsive-navbar-flexbox-html-css\src\common\nav.jsx in div: nav-logo.

        <a className="nav-bars" href="#navbar" aria-label="Open main menu">
            <i><CgMenuGridO /></i>
        </a>
        <a className='logo-image'>
            <img src={brandlogo} />
        </a>

2. Apply changes in css by replacig the style right:0 with left:0 in nav element reactjs-responsive-navbar-flexbox-html-css\src\assets\css\style.css