I Need Help Making CSS for a Modern Vertical Navbar

I need help making CSS for a modern vertical navbar

You can start with something like this:

html,body {  min-height: 100%;  max-height: 100%;  height: 100%;  font-family: Oswald, sans-serif, Arial;  font-size: 14px;  background: #fff}
a {  text-decoration: none}
li {  list-style: none}
ul {  margin: 0}
.main-nav {  width: 100vh;  height: 45px;  position: fixed;  background: #4c4c4c;  -webkit-transform-origin: left top;  -webkit-transform: rotate(-90deg) translateX(-100%);}
ul.nav {  margin: 0 auto;  height: 100%;}
ul.nav li {  margin-right: 20px;  float: right;  height: 100%;  line-height: 45px;}
ul.nav li a {  color: #fff;}

<div class="main-nav">  <ul class="nav">    <li><a href="#">HOME</a></li>    <li><a href="#">METHODOLGY</a></li>    <li><a href="#">PORTFOLIO</a></li>    <li><a href="#">SERVICES</a></li>    <li><a href="#">TEAM</a></li>    <li><a href="#">CONTACT</a></li>  </ul></div>

Vertical aligning single line items in a double line navigation menu

Give .main-navigation li a a display: table-cell; instead of display: inline-block;.
And set vertical-align: middle; on the a, not on the li

Example:
http://jsfiddle.net/KM99G/4/

vertical menu where submenu flys out and sticks to top of page

i've update your fiddle

is this what you wanted to happen?

#nav .opener {
  display: none;
}

ul li {
  list-style-type: none;
  list-style-image: none;
}

#nav {
  width: 600px;
  position: fixed;
  top: 0;
  right: 0;
  padding-top: 0px;
  z-index: 9999;
  height: 100%;
}

#nav ul {
  background: #4f626b;
  width: 300px;
  height: 100%;
  position: absolute;
  right: 0px;
  margin-top: 0px;
  z-index: 999999;
  padding: 0;
}

/* Hover dropdown */

#nav ul li {
  /* position: relative; */ // removed
  padding-left: 40px; //added
}

#nav ul li a {
  color: #fff;
}

#nav ul li ul {
  display: none;
}

#nav ul li:hover ul {
  display: block;
  top: 0;
  left: -100%; //changed to -100%
  height: auto; //changed to auto
}

Vertically align image and nav item in navbar in Bootstrap 5

navbar-nav has display: flex; so you can use the align-items-center utility class to the <ul> element.

<ul class="navbar-nav align-items-center">

<!DOCTYPE html>
<html lang="en">
<head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="/css/site.css?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU" />
</head>
<body class="d-flex flex-column min-vh-100 bg-dark">
<header>
    <nav b-kcycjqi1p7 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary box-shadow mb-3 py-2">
        <div b-kcycjqi1p7 class="container-fluid">
            <a class="navbar-brand" href="/">
                Logo
            </a>
            <button b-kcycjqi1p7 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span b-kcycjqi1p7 class="navbar-toggler-icon"></span>
            </button>
            <div b-kcycjqi1p7 class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul b-kcycjqi1p7 class="navbar-nav flex-grow-1">
                    <li b-kcycjqi1p7 class="nav-item">
                        <a class="nav-link" href="/">Home</a>
                    </li>
                    <li b-kcycjqi1p7 class="nav-item">
                        <a class="nav-link" href="/home/privacy">Privacy</a>
                    </li>
                </ul>
                <ul class="navbar-nav align-items-center">
        <li class="nav-item">
            <a class="nav-link btn btn-danger" href="#" role="button" >
                hello
            </a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBtdJ1tdTF5EbpVV2Cgxsw687vTiori+ntddEk8rQ+W+TbgbyT6Y9PrU+r6p4nlc6PBHcRJJzvLEu4+v8ASsuDS9Re582WCSacH5pQ+cN0Oaw5fd1PPa6s2n1uSS9SMiaGAkHL8DntxXe22i2F0IPPnmnW5+aN9m0EjqPwrzvT08Ua2ZhpHkQw2r+QGdQCWB5NbkWu+JPBt3HbeIXje3nUrDOhzg/iO9ZvBU+ZNPX+vM2+pStzI07jTJooZLSzHm3UcuXmJJH+6p6YxSRW3lzgSyupEe90wQRXR2sMTeRcPPdRs2NixyjbIG5Hy/5xTrsxm5NuSYxKxSQsOee2eta00o+6iKdRw0PL2vYZvEUumzSyt9ptlmS5jc+bHcYyCp9M9qoalHd+INIF7G6jU7Xi9WE7HkA/iK+o7kVgx3sbatM+HEgZo0cnuOlJb389r4ka6RnSdlbaB3OK6dC3CzO48OQ3+yzdNeTT4b2R3uEyOfVvT6fWtWPSBrdhd6dqOvNqUofdAH5CEc5ViTjI4yOOa47RvPvtJmkvbGQ2ce5knZSFBJwVDEY684rtPB/h99dlmFgpt7VoWSScnIDFCowccnpwPSsJuSdkerTlH2abL1uy6lodxLbzyGWFifLjILxoD1APXgdRUK+KJdQWOQRLKU/dvOASA3QfjjvU2qQ32j6ZZajcRNaaqluLe9ixwSDgSAjgjIBz71zFlLPPJJ9jm8ieeTLozBEYdyB0yawlGNOyvY8Rx1OIsdDvtb1waVaxyG8urzbGNnCJyWcn0A5r6o0bQdD0iGODTtOt1aNApm8ob392bGSTjmuN+Fnh8obzXLhNpZmt7fI+YqD8zHI4yeOPSu3gnX7bdxiTgFVPI54yK6m+h2Ju1yzf2sd/CbaVVMLDBUgEflS2FhbWSbYVwe4z/TpTBdD7WlqBhxEZcD0zgf1pt1ctJlIJBGVI3MRSdtxpjtTtdM1awe1v4EuYX/5Zkcn6d/xFcPL4W0vS9ZjuGkzY3EbR+XIAwjccgbsemfyrtbeF5lF7udQ4yEGBlR0yeuD1wMda5/xxNHb6RbGeVoke5AQqM/wMeQc5FK13cVSKav1P/9k=" alt="Akshay Gollahalli" width="40" height="40" class="rounded-circle">
            </a>
            <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
                <li><a class="dropdown-item bg-danger" href="/microsoftidentity/account/signout">Sign out</a></li>
            </ul>
        </li>
</ul>
            </div>
        </div>
    </nav>
</header>
</body>
</html>

Responsive vertical centering list item in navigation menu

Final Product

My first solution can be found at the bottom of this post.

We are actually making this harder than necessary... Let's make a tasty hamburger!

Wrap the nav and logo in <header>:

<header class="hamburger">
    <h1>Logo</h1>
    <nav></nav>
</header>

They will now be the filling between the hamburger buns which look like this:

header:before, header:after {
    content:'';
    display: block;
    height: 50%;
    background: #000;
    width: 100%;
}

This gives us the equivalent of:

<header class="hamburger">
    <div>:before bun</div>
        <h1>Logo</h1>
        <nav></nav>
    <div>:after bun</div>
</header>

The header:before and header:after are each given the same percentage height
The <header> container controls the height of the pseudo element (:before,:after) children
The <nav> is contained in-between and is perfectly centred vertically.

HTML / CSS / Demo Snippet

html,body {height: 100%;  }
body {  margin: 0;}
header {    position: relative;    background: #000;    height: 4.3%;    min-width: 800px;}/*    Create a spacer above and below the nav    to center the menu between them  */header:before, header:after {    content:'';    display: block;    height: 50%;    background: #000;    width: 100%;}h1 {    background-image: url(http://imandragrafie.nl/demo/images/menu/polygon1.png);    height: 80px;    margin:0;    padding:0;    text-indent: -9999px;    width: 100px;    position: absolute;    top: 0;    left: 50%;    margin-left: -40px;}nav#mainMenu {    width:100%;    text-align: center;    margin:0;    padding:0;    background-color:#000000;}nav#mainMenu a {    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;    font-size:1.2em;    color: #FFF;    text-decoration: none;    vertical-align: middle;}/* create a spacer to get those dots */ nav#mainMenu a:after {    content:'\00B7';    color:#2bbfc4;    display: inline-block;    width: 0;    padding: 0 2%;}/*remove the dot and give a width to create a space for the image */ nav#mainMenu a.mid-left:after {    width: 120px;    content:'';}/* No spacer for the last child */ nav#mainMenu a:last-child:after {    display: none;}

<header> <h1 title="IMANDRAGRAFIE">IMANDRAGRAFIE</h1>  <nav id="mainMenu"><a href="index.html">HOME</a><a href="story.html">MY STORY</a><a href="gallery.php" class="mid-left">GALLERY</a><a href="rates.html" class="mid-right">RATES</a><a href="terms.html">TERMS</a><a href="contact.html">CONTACT</a></nav></header>

How can you create a vertical navbar with drop down menus?

Do this:

.navbar li ul
{
    display: none; /* Hides the drop-down menu */   
    margin-left: 150px;
    margin-top: -50px;
    float:left;
    height: 0;
}

Here's the jsFiddle demo: http://jsfiddle.net/leniel/ZYUeX/3/

CSS Menu Layout - Make div take up remaining vertical space

Replace display: block with display: flex for #wallPopsMenuItem:hover #wallDecorSubMenu and remove float: left, height: 100% from .subMenu .subMenuColumn.

Updated JSFiddle

I Need Help Making CSS for a Modern Vertical Navbar