Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

157
Visualizações
Resize the windows and get a stylish scroll bar for the menu

what parameters do i have to add in my NavBar.css (i.e menu in left side) if I want to see a scroll bar (in transparent white) appearing when i resize my windows (i.e I can scroll down or up if the window is not at the max so I can still scroll the menu and see the other icons) please ?

.NavBar{
  width: 15rem;
  height: 100vh;
  background-color: #FF7F50 ;
  flex-direction: colums;
  gap: 1.25rem

} 

This is what i want to have not in green but in transparent/grey bar .

enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Scroll the body:

html {
  overflow: hidden;
  /* Stop the body expanding */
}

body {
  margin: 0;
  height: 100vh;
  /* Tells the element to scroll instead of the default of visbily overflowing */
  overflow-y: auto;
  /* Scrollbar and scrollbar gutter colors */
  scrollbar-color: #888 transparent;
}

nav {
  width: 15rem;
  height: 110vh;
  background-color: #FF7F50;
  /* gap and flex-direction will do nothing as this element uses flow layout (flex hasn't been declared) */
  flex-direction: colums;
  /* Even then, colums has a typo */
  gap: 1.25rem;
}
<nav>
  test
</nav>

Scroll the nav:

body {
  margin: 0;
}

nav {
  width: 15rem;
  height: 100vh;
  overflow-y: auto;
  /* Tells the element to scroll instead of the default of visbily overflowing */
  background-color: #FF7F50;
  scrollbar-color: white transparent;
  /* Scrollbar and scrollbar gutter colors */
}

nav>h1 {
  margin-top: 100vh;
}
<nav>
  <h1>Pineapple is good on pizza</h1>
</nav>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda