Navbar icons are not showing . I have installed both overlay-navbar and react-icons. Can you help me please ? about mernprojectecommerce

[rajgorhetal]

Update your header.js with below code. This will solve the problem

import React from 'react';
import { ReactNavbar } from 'overlay-navbar';
import { MdAccountCircle } from 'react-icons/md';
import { MdSearch } from 'react-icons/md';
import { MdAddShoppingCart } from 'react-icons/md';
import logo from '../../../images/logo.png';

const options = {
burgerColorHover: '#eb4034',
logo,
logoWidth: '20vmax',
navColor1: 'white',
logoHoverSize: '10px',
logoHoverColor: '#eb4034',
link1Text: 'Home',
link2Text: 'Products',
link3Text: 'Contact Us',
link4Text: 'About Us',
link1Url: '/',
link2Url: '/products',
link3Url: '/contact',
link4Url: '/about',
link1Size: '1.3vmax',
link1Color: 'rgba(35, 35, 35,0.8)',
nav1justifyContent: 'flex-end',
nav2justifyContent: 'flex-end',
nav3justifyContent: 'flex-start',
nav4justifyContent: 'flex-start',
link1ColorHover: '#eb4034',
link1Margin: '1vmax',
profileIcon: true,
profileIconColor: 'rgba(35, 35, 35,0.8)',
profileIconUrl: '/login',
ProfileIconElement: MdAccountCircle,
searchIcon: true,
searchIconColor: 'rgba(35, 35, 35,0.8)',
SearchIconElement: MdSearch,
cartIcon: true,
cartIconColor: 'rgba(35, 35, 35,0.8)',
CartIconElement: MdAddShoppingCart,
profileIconColorHover: '#eb4034',
searchIconColorHover: '#eb4034',
cartIconColorHover: '#eb4034',
cartIconMargin: '1vmax',
};

const Header = () => {
return <ReactNavbar {...options} />;
};

export default Header;

[alalUDDIN123]

Showing like this

[TOSEEB]

did you got solution for this

[sk394]

This helps me:
<ReactNavbar searchIcon = {true} SearchIconElement = {MdSearch} profileIcon = {true} ProfileIconElement = {MdAccountCircle} cartIcon = {true} CartIconElement = {MdShoppingCart} {...options} /> </div>

[rajgorhetal]

Showing like this

Please check above comment

[HetMamtora]

I have just started with Front-End part of E-Commerce project and compilation is going 100% successful but Navbar is not visible on react page. It's completely a blank page. Someone please help me to resolve this issue.

Here are the snapshots of code.

Header.js

App.js

Index.js

Package.json

I've force installed some of the packages using --legacy-peer-deps because the project is old and some of the libraries are deprecated but still usable as per the info from stackoverflow.

[HetMamtora]

I have just started with Front-End part of E-Commerce project and compilation is going 100% successful but Navbar is not visible on react page. It's completely a blank page. Someone please help me to resolve this issue.

Here are the snapshots of code.

Header.js

App.js

Index.js

Package.json

I've force installed some of the packages using --legacy-peer-deps because the project is old and some of the libraries are deprecated but still usable as per the info from stackoverflow.

SOLVED !
I updated to new format of index.js I was using the older one.

index.js(UPDATED)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(

)