CODEWITHSUNDEEP
javascripthtmlcss
dabljues
dabljues

Reputation: 1947

Page navigation bar - without taking space

I have a navbar which contains some useful buttons and information. I don't want it to be sticky or something like this, I just want it to be on the top.

I have a problem with the scroll appearing on my page because:

The rest of the question is me explaining myself but you can see exactly what I mean here: https://codesandbox.io/s/vigilant-fast-wtoc5:

The expected output for me is: the content below the navbar takes the space it needs to the end of the page's height (without adding more height and scroll) and is centered (vertically and horizontally) - within its own div.

So let's go into the details:

This is the navbar:

const AppBar = styled.header`
  color: white;
  margin-bottom: 0.1rem;
  width: 100%;
  position: sticky;
`;

It's styled-components syntax but you know the drill, it's a header with this style. Anyway, this page header is rendered above anything else, it's present on every page. The problem that I have is:

When I have a page with like one <span> centered on it (so not too much of content), the page renders with a scroll, because the navbar has its height, so I can scroll as much as it takes to cover it up fully (and no more).

This is a problem for me since when I don't scroll, the text is not centered on the page. And if I do, then it's centered, but I don't want to have to scroll to see the desired output.

Anyway, this are my global styles:

html, body, #root {
  height: 100%;
  margin: 0;
}

And this is how I center text on the page (this is the style of the div in which span is put):

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;

I know I can do position: fixed but then if some page is not centered (its content should appear just below the navbar) then its content is getting covered by the page header.

So my question is: Is there a way to have this navbar not add a scroll to my page (I imagine it would be like painted "over" the page?) or somehow center my pages differently (when I want to) to make this centering work with the navbar present as it is now?

P.S I use React but I composed this example in plain HTML&CSS.

Upvotes: 0

Views: 838

Answers (1)

Amoong
Amoong

Reputation: 171

I modified some of your code(in your link). I hope this is what you want and be helpful to you.

html,
body {
  height: 100%;
  margin: 0;
  display: flex;             /* add this */
  flex-direction: column;    /* add this */
}

.navbar {
  background-color: blue;
  color: white;
  margin-bottom: 0.1rem;
  width: 100%;
  height: 300px;
  position: sticky;
  flex-shrink: 1;           /* add this */
}

.center {
  font-size: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*height: 100%;*/
  flex-grow: 1;             /* add this */
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="navbar"></header>
    <div class="center">Centered content</div>
  </body>
</html>

Upvotes: 1

Related Questions