I'm facing an issue with my navbar setup. I want it to stay at the top of the page without being sticky. However, the presence of the navbar is causing a scroll to appear on my page. This happens because:
- The navbar takes up space
- I sometimes use tricks like
height: 100%to center content
If you want to see exactly what I mean, check out this example:
- Scroll appears
- Content is not centered until I scroll
I expect the content below the navbar to take up the necessary space without adding extra height and causing a scroll. It should also be centered both vertically and horizontally within its own div.
Here's how I've styled the navbar:
const AppBar = styled.header`
color: white;
margin-bottom: 0.1rem;
width: 100%;
position: sticky;
`;
Despite using this header on every page, the issue arises when there is minimal content on the page. The presence of the navbar causes unnecessary scrolling to cover its height, affecting the centering of content.
My global styles are as follows:
html, body, #root {
height: 100%;
margin: 0;
}
To center text on the page, I use the following style on the containing div:
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
Although I could use position: fixed, it leads to content being overlapped by the navbar. Is there a way to prevent the navbar from causing a scroll on the page, or adjust the centering of content to work harmoniously with the current navbar setup?
P.S: While I work with React, this example is in plain HTML & CSS for clarity.