Question 219763 in Html Question posted in
Some basic documentation can be found here.

Html – How can I position the navbar on the right hand side of the screen?

How can i put a nav that uses half of the screen on the left side and that on the right side i can scroll down without the nav moving
What I’m trying to get is something like the images that I’m going to put:

example
example

I tried using position: sticky; for the nav and using flex-direction: column; for the right hand column but it didn’t work.

Tags:

2

Answers


  1. 0

    position: fixed; is probably what you are looking for. If you apply it to the nav, it will always stay where it is, even if you scroll. Be aware, that when you do that, other elements might end up behind the nav.

    Also, it’d be very helpful, if you provided some code we could try. Without the code, this is the best I can do.

    Login or Signup to reply.
  2. 0

    One of the most efficient ways to solve this is the usage of a 2-column grid. As a direct child of the grid container (body in this case), you use an aside element and a main element as the main content.

    Within the aside you can place the nav and use position: sticky; top: 0; to keep the navbar within the viewport.

    * {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

nav {
  position: sticky;
  top: 0;
  min-height: 100vh;
}


/* for visualisation purpose only */
main {
  min-height: 5000vh;
  border: 2px dashed red;
}

nav {
  border: 2px dashed blue;
}
    <aside>
  <nav>This is the navbar</nav>
</aside>
<main>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search