Sidebar using HTML and CSS || Vertical Navigation || Site OverFlow

Side Navbar using HTML and CSS || Site OverFlow
How to create a sidebar or side navbar in html and css by Site OverFlow
In this tutorial I am gonna show you how to make a sidebar in html and css. If you like the video than please subscribe #siteoverflow for more tutorials.
Background Music By:
Music Credit:
Track: JPB - High [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • JPB - High | Trap | NC... ​
Song: Jarico - Landscape (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link: • Video
sidebar menu using html css, sidebar menu, side bar menu css, html sidebar menu, side navigation menu bar using html css, side menu bar html css, css side menu bar, side bar menu with css, pure css sidebar menu, side menu bar using html css, side navigation menu bar, side navbar html css, sidebar, side navbar css, side navigation menu html css, side menu bar css, css side navigation menu bar, side navbar, sidebar menu in html css, sidebar menu

[@santanu8899]

Nice video 👍❤️❤️❤️❤️❤️

[@nusarajaneesha1982]

hukapan gd luck

[@ledwysdelgado7304]

Shouldn't nav, ul, and li tags be used when creating a side nav?

[@juliiosanchez1321]

Good video bro, you helped me a lot thanks

[@8koi139]

This was exactly what I was looking for! tnx!
btw You could have used
.menu a {
boder-bottom: 4px solid #000;
}
instead

[@bilalakhtar5328]

Can you create horizontal and sidebar dropdown menu in same page aka in same time in html and of course I css 😌 please

[@juliiosanchez1321]

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.main{
width: 100%;
height: 100vh;
display: flex;
text-align: center;
}
.menu{
width: 20%;
background-color: #121227;
}
#logo{
color:#fff;
font-size: 30px;
letter-spacing: 4px;
padding: 15px;background-color: #000;
}
.menu a{
text-decoration: none;
color: #fff;
font-size: 18px;
letter-spacing: 2px;
display: list-item;
padding: 20px;
border-top: 1px solid black;
}
.menu a:hover{
background-color: red;
transition: 0.5s;
letter-spacing: 4px;
text-transform: uppercase;
}
.body{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.body h1{
color: #fff;
letter-spacing: 4px;
padding: 15px;
background-color: #000;
}

[@codecinn7170]

thx a lot precise and concise , save me lots of time, hope your channel can grow magnificently, underrated

[@zenitsutv5684]

Is there a way to make that the red color stay on what we clicked ??

[@vodkafordinner540]

The music freaked the shit out me

[@pouranan]

Hello I need to add a background image to this, what code should I use? Because my navigation bar is disappearing when I try to add a background image

[@siteoverflow2294]

If you want to to add background image on navigation bar, give background image in css instead of background color on navigation bar div. Or if you want in body, add background image in css on body container div using class name.

[@gilryn]

Hii, I'm hoping you can reply quickly. The hover effect only works on 2 items.

[@siteoverflow2294]

You may have write some anchor tags outside of menu div thats why it is not hovering on all anchor tags. Make sure all anchor tags are in menu div
.menu a:hover{
background-color: red;
transition: 0.5s;
letter-spacing: 4px;
text-transform: uppercase;
}

[@gilryn]

THE TITLE
One
Two
Three
Four
Five
Six
Seven
Eight
Nine

Only the One, Two, Eight and Nine are working
.menu a:hover{
background-color: blueviolet;
transition: 0.3s;
letter-spacing: 5px;
text-transform: uppercase;
}
I edited some. Do you think I may have done something incorrectly? Thank you for answering, btw! :D

[@siteoverflow2294]

I don’t know why it is not working. But code is correct.

[@gilryn]

@@siteoverflow2294 Thank you for answering!

[@jill1599]

Quick question: How could i put this nav bar on the right side of the screen instead of the left?

[@siteoverflow2294]

Just change the navbar div with body div or apply flex-direction: column-reverse on parent div

[@jill1599]

@@siteoverflow2294 Thanks! Do you, by any chance, also know how i could place this navbar at the bottom of the screen (responsive, so at the bottom at bigger screens and at the right side with smaller screens). Anyways thanks a lot!

[@siteoverflow2294]

To apply different stylings on different device’s width you have to write media queries. And I recommend to use grid instead of flex for responsiveness.

[@felyy1694]

Code link Please?

[@juliiosanchez1321]

Documento sin título


LOGO
Home
Servicios
Productos
Contactos


Slider usung html y css
Lorem ipsum dolor sit amet. Aut error doloremque et natus rerum non iure dignissimos sit nisi voluptatem. Sit incidunt adipisci sit perferendis dicta non distinctio dolorem in voluptas laudantium et labore est obcaecati quibusdam!