responsive-nav | Responsive Navigation with CSS and jQuery | Navigation library

so this is my svg logo rendered in chrome:

and this is what is display in firefox:

I can't understand why and how it is rendered like this in firefox.

this is the simple code:

.

Does any body know how I can fix that ?

Edit:

This is the rest of the code... But I don't think it would help.

I'm using react bootstrap and react in the development of my portfolio app, however, I just need one small detail to add and can't find the right method to do it.

I need to make the link on the navbar switch color depending on the page, for instance if I'm on the home page, "Home" on the navbar should be different in color, and so on.

This is the last thing i need to finalize my code.

if you want to check the whole repository here it is: https://github.com/awadbilal/portfolio

This is my navbar code:

I installed react-bootstrap 5.1.3 and the app functions normally, but when I copy and paste this component, the app enters an infinite loop. The terminal application runs fine, but the browser displays no errors. There are no additional components in my application.

React Version: 17.0.2

=> Navigation.js

What's happening is if I scroll down to the bottom of the home page, click "Rental" in the nav, then click the logo in the nav to go back to the home page, the home page scrolls down to the bottom of the page rather than staying at the top (what would be expected). This happens with all the pages if they are visited scrolled down, navigated away and back they will scroll down. Even with a hard browser refresh or going to a different website and then viewing my site, the page will still scroll down.

I was using Bootstrap 4. I refactored to use Bootstrap 5 and this is when I noticed the scrolling. So I decided to try React-Bootstrap 2.0.0 but the problem persists.

You can see issue here: https://eoja82.github.io/lakeside-demo/

The Bootstrap 5.1.3 cdn link I'm using:

I'm new here also newbie on ReactJS.

Here I created a navbar using bootstrap navbar component in Reactjs.

I am having this header which on scroll, I want to change the background to a different color. The navbar variable returns null always. Why is it so? How can I do that? The transform:translateY is just for a small animation on scroll.

Recently I started using react-bootstrap with nextjs, and when I use the navBar component, it crashes, I don't know why. When my navbar first loads, it is normal,

but, when I refresh the page, the CSS bugs

and this error appears in the console.

Here is my code:

EDIT: Never mind, I found the problem. I used Nav.link instead of Nav.Link in the navbar component :/. Works fine now.

I'm trying to learn react and bootstrap and was building a simple app with a navbar, a couple of pages and a login page. I created a seprate file called Navigation.js to define the Navbar component and exported it so that I can use it in App.js. However, I get the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of Navigation.

The Navigation.js file path src/components/Navigation.js and for App.js, it is src/App.js.

Here are the relevant code snippets:

App.js

If I import the full bootstrap css import 'bootstrap/dist/css/bootstrap.min.css';

Then it ruins the css for the rest of my webite so I want to scope it around the variables I need it included around (navbar stuff)

I followed the recommended answer here but it didn't seem to work.

First attempt I tried this: