I'm having a little trouble with styling a 100vw navbar with page sections that have 100vh. I also included a 'snap' effect to the pages which snaps to the page when the user scrolls. The main issue is that the navbar is overlapping with the scrollbar and I'm unsure how to fix it. I want the navbar to start at the top of the page and not below the nav either. It looks like if I remove the overflow-y: scroll in the app.css content the scroll bar appears normally but I lose the scrolling effect. Can anyone give me insight on what I'm doing wrong? Thanks
App js
import './App.css';
import { Navbar } from './components/Navbar';
import { Body } from './components/Body'
function App() {
return (
<>
<div className="header">
<Navbar></Navbar>
</div>
<div className="content">
<Body></Body>
</div>
</>
);
}
export default App;
App CSS
*{
font-family: 'Nunito Sans', sans-serif;
}
div{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
display: block;
}
.content{
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
Navbar
import React from 'react'
import '../styles/Navbar.css'
export const Navbar = () => {
return (
<>
<div className = "navbar"></div>
</>
)
}
Navbar CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
background-color: #343434;
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
width: 100%;
min-height: 8vh;
}
Body
import React from 'react'
import '../styles/Body.css'
export const Body = () => {
return (
<>
<section className = "one">
<h1>stuff</h1>
</section>
<section className = "two">
<h1>stuff</h1>
</section>
<section className = "three">
<h1>stuff</h1>
</section>
<section className = "four">
<h1>stuff</h1>
</section>
<section className = "five">
<h1>stuff</h1>
</section>
</>
)
}
body CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
color: white;
padding-top: 8vh;
height: 100vh;
}
.one{
background-color: rgb(36,164,138);
}
.two{
background-color: rgb(211,79,79);
}
.three{
background-color: rgb(67,91,175);
}
.four{
background-color: lightsalmon;
}
.five{
background-color: lightskyblue;
}
