CODEWITHSUNDEEP
htmlcssnavbarstyling
Andrew Smith
Andrew Smith

Reputation: 33

Vertical Nav bar separates from header when I scroll

I'm creating a vertical nav bar that I want fixed on the left hand side and for the container to take up the entire height of the window. It's fine and dandy until I scroll down. The pictures below will explain everything.

Looks fine here

enter image description here

Looks not fine here

enter image description here

HTML

<h1>Blazing Bevy</h1>

<nav>
    <ul>
        <li>
            <NavLink href="/">Play</NavLink>
        </li>
        <li>
            <NavLink href="/About">About</NavLink>
        </li>
    </ul>
</nav>

CSS

nav {
    border-right: 10px solid #626262;
    height: 100vh;
    position: fixed;
    width: 6.5rem;
}

Upvotes: 0

Views: 561

Answers (2)

user14550434
user14550434

Reputation:

Here's how I would do it with CSS grid: Make the body a grid container, and divide it into a top section, a side section, and a main section, and give the main section an overflow-y of scroll.

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 20fr;
}

body > * {
  padding: 1em;
  border: 0.5em solid black;
  background: gray;
}

header {
  grid-column: span 2;
}

main {
  overflow-y: scroll;
}
<header>
  <h1>Blazing Bevy</h1>
</header>
<nav>
  <ul>
    <li>
      <a href="/">Play</a>
    </li>
    <li>
      <a href="/About">About</a>
    </li>
  </ul>
</nav>
<main>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
</main>

Upvotes: 0

Sheikh Farzaib
Sheikh Farzaib

Reputation: 68

If you want to scroll with header and nav(sidenav) then you should fixed header too and if you want scroll with only sidenav then you should go with sticky like this

 nav {
border-right: 10px solid #626262;
height: 100vh;
position: sticky;
width: 6.5rem;
}

Upvotes: 1

Related Questions