Open alalUDDIN123 opened 1 year ago
did you got solution for this
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;
Showing like this
Please check above comment
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.
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(
)
This helps me:
<ReactNavbar searchIcon = {true} SearchIconElement = {MdSearch} profileIcon = {true} ProfileIconElement = {MdAccountCircle} cartIcon = {true} CartIconElement = {MdShoppingCart} {...options} /> </div>
Showing like this