So I'm new to this I don't really know what I'm doing wrong I'm trying to use some CSS code in JS file but not working
it shows a white screen
it suppose to style the Navbar but the code inside the back quotes doesn't work
maybe the reason is silly but I'm new to this so I've no idea why should I add
I hope you could help me
this is the code:
CSS:
import styled from 'styled-components';
import {Link as LinkR} from 'react-router-dom'
export const Nav = styled.nav`
background: #000;
height: 80px;
/*margin-top: -80px;*/
display: flex;
justify-content: center;
align-items: center;
postiion: sticky;
top: 0;
z-index: 10;
@media screen and (max-width: 960px){
transition: 0.8s all ease;
}
`
export const NavbarContainer = styled.div`
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
padding: 0 24px;
max-width: 1100px;
`
export const NavLogo = styled(LinkR)`
color: red;
justify-content: flex-start;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
`
///////////////////////////////////////////////////////
HTML:
import React from 'react'
import { Nav , NavbarContainer , NavLogo} from './navparElements'
function index() {
return (
<>
<Nav>
<NavbarContainer>
<NavLogo to='/'>GUIDECK</NavLogo>
</NavbarContainer>
</Nav>
</>
)
}
export default index
///////////////////////////////////////////////////////
and:
import './App.css';
import Navbar from './componant/Navbar';
import {BrowserRouter as Router} from 'react-router-dom'
function App() {
return (
<Router>
<Navbar />
</Router>
);
}
export default App;