When I import Bootstrap CSS it adds extra CSS to the navbar. As it is shown in the image below. I am using bootstrap cards in this code but not for Navbar. When I remove the Bootstrap CSS It works fine.
You can check the code here
Please help me resolve this.
if your problem is the under line you can omit that using
style={{ textDecoration: 'none' }}
here is your modified navbar.jsx file
// eslint-disable-next-line
import React from 'react';
import { NavLink } from 'react-router-dom';
function Navbar(){
return(
<>
<header className="l-header">
<div className="navi bd-grid">
<div>
<NavLink to="#" className="navi__logo">Portfolio</NavLink>
</div>
<div className="navi__menu" id="navi-menu">
<ul className="navi__list">
<li className="navi__item">
<NavLink to="#home" className="navi__link menu" style={{ textDecoration: 'none' }}>Home</NavLink>
</li>
<li className="navi__item">
<NavLink to="#about" className="navi__link" style={{ textDecoration: 'none' }}>About</NavLink>
</li>
<li className="navi__item">
<NavLink to="#skills" className="navi__link" style={{ textDecoration: 'none' }}>Skills</NavLink>
</li>
<li className="navi__item">
<NavLink to="#work" className="navi__link" style={{ textDecoration: 'none' }}>Work</NavLink>
</li>
<li className="navi__item">
<NavLink to="#contact" className="navi__link" style={{ textDecoration: 'none' }}>Contact</NavLink>
</li>
</ul>
</div>
<div className="navi__toggle" id="navi-toggle">
<i className='bx bx-menu'></i>
</div>
</div>
</header>
</>
);
};
export default Navbar;
output will be something like this
Try to import the bootstrap on your index.js file and it should solve the problem.
