After importing Bootstrap CSS, I noticed that extra CSS is being applied to the navbar, as seen in the image below. Although Bootstrap cards are being used in the code, the issue is specifically with the Navbar. Interestingly, the problem disappears when I remove the Bootstrap CSS.
https://i.sstatic.net/gSWYz.png
You can review the code here
I would greatly appreciate any assistance in resolving this issue.
if you encounter an issue with the underline, simply remove it by using the following code:
style={{ textDecoration: 'none' }}
below is the updated 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;
you can view the output here
If you're facing the issue, consider integrating Bootstrap into your index.js file. This might help in resolving the problem.
Currently facing an issue where my sentences break in the middle. Working with Material UI requires manual styling of different components like MUI. The problem I'm encountering can be seen below. I tried removing the display: flex, but then the squar ...
Has anyone successfully implemented a ScrollView in React Native with paging enabled to swipe through a series of images? I am having trouble making the image views fill each page of the scroll view without hardcoding width and height values for the image ...
I am facing a scenario where I have a nested popup dialog component (From materials UI) consisting of two dialogs. Each dialog has a state variable 'open' which indicates whether the dialog window is open. I need to close both dialogs when I clos ...
I found an example on css-tricks.com that demonstrates a convenient mixin for custom scrollbars: @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) { // For Google Chrome &::-webkit-scrollbar { w ...
Upon embarking on a new React/Next.js project, I encountered an issue with mocking memoized React components that I had not experienced in previous projects. Despite my efforts, I could not figure out the root cause of this discrepancy. Allow me to provide ...
After reading this article on downloading objects from GCP Cloud storage bucket, I'm curious about setting the file destination dynamically in React. Is there a way to achieve this? The article can be found at: https://cloud.google.com/storage/docs/do ...
Applying a hover effect to all divs inside a well can be done using the following code: .well:hover div { background-color:green } However, if you only want to apply the hover effect to specific divs inside the well, you can specify them in this way: ...
Whenever I make a change in my code, the line css/app.css in mix-manifest.json disappears. The only solution is to execute npm run watch or npm run dev, but the problem reoccurs each time I modify the code. Here is how my mix-manifest.json looks when eve ...
I encountered a situation where I needed to display data from an object response in 2 columns. The catch is that the number of items in the data can vary, with odd and even numbers. To illustrate, let's assume I have 5 data items to display using 2 co ...
**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...
I've encountered an issue while attempting to process a credit card payment using Stripe. Here's the code snippet I'm currently working with: import StripeCheckout from "react-stripe-checkout" // import confirmPayment from 'st ...
I'm having trouble changing the border color of the ::after pseudo element on a standard text field from MUI. I've been unable to figure it out. <TextField id="standard-basic" label="Email" variant="standard"/> ...
In my React JS boilerplate code, I have a container component that retrieves data (such as a list of schools) using sagas into a reducer. The state set by the reducer is then read by a selector function on the render page to display to the user. Sample ...
I'm facing an issue with the default value in my autocomplete feature within my React app. Even though I set a default value, when I try to submit the form, it still shows as invalid because it appears to have no value until I manually click on the au ...
Within a fixed-width paragraph, I have an anchor tag. The CSS for the p tag includes the properties text-overflow: ellipsis and overflow:hidden. However, when the anchor tag's content overflows (e.g., it contains a long string), the right outline is n ...
I can't figure out what I'm doing incorrectly... I included some CSS code a:active {text-decoration: none; border: 0px solid black} a:link {text-decoration: none; border: 0px solid black} a:visited {text-decoration: none; border: 0px solid black ...
Why is the button pulling when I move the cursor over a camera? Is there a way to solve this issue? <div class="input-group-btn advanced-group"> <button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Send Imag ...
After running npm build on my react app and setting up an S3 bucket on AWS as a static website host, I successfully uploaded the contents of the react build folder to it, allowing me to access the frontend. However, my backend, which is powered by node an ...
I seem to be facing a problem where I am attempting to append the key of my object at the end of a URL. It appears to work fine as a button, but for some reason the key is not being displayed within the href attribute. Typically, I would use "+" to conca ...
As a newcomer to React, I am facing an issue while working on the front-end UI of a web application. Whenever I try to add a text field to the box I created, the app fails to render anything other than a blank color on the screen. Here is how it looks: W ...