Vertical Menu in Bootstrap

Bootstrap 4 Vertical Navbar

There are various issues that were causing a problem. In the latest Bootstrap 4 (alpha 6) the -xs- infix has been removed so it's just col-3 and col-9, and that was causing the overlay problem. Also, container shouldn't be used inside col-.

<div class="container-fluid">
    <div class="row">
        <div class="col-3 col-sm-2 col-md-2 col-lg-1 col-xl-1">
            <nav class="nav navbar-light navbar-toggleable-sm">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarWEX" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse flex-column mt-md-0 mt-4 pt-md-0 pt-4" id="navbarWEX">
                    <a class="nav-link navbar-brand active" href="~/Views/Forms/ControlPanel.cshtml"><span class="fa fa-home"></span></a>
                    <a href="" class="nav-link">Linnk</a>
                    <a href="" class="nav-link">Linnk</a>
                    <a href="" class="nav-link">Linnk</a>
                </div>
            </nav>
        </div>
        <div class="col-9 col-sm-10 col-md-10 col-lg-11 col-xl-11">
            <h2>Hello There</h2>
        </div>
    </div>
</div>

http://www.codeply.com/go/j9esYkO7Dt

Note: navbar-toggleable-* was replaced with navbar-expand-* in Bootstrap 4 Beta 3 (and newer).

Also see:

Bootstrap 4: responsive sidebar menu to top navbar

How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Bootstrap navbar vertical divider

Might as formulate a complete answer:

Since the elements are built ltr, and absolute positioned elements are taken out of the flow of the document, the upcoming <li>s and its embedded <a> are effectively stacked on top of the previous .nav-link:before's content; hence hiding it. The z-index (from the third dimension) solves this issue by bringing it to an higher layer.

The other issue lay with the last element of the children not being .nav-link, but being .nav-item. So the proper solution would be .nav-item:last-child>.nav-link:before{display:none}.

A final remark concerning the "no-pipe" solution; while this is actually preferred in comparison to linking, chaining and nesting in css for performance, it makes little sense to declare position, content, top, right, width, height en background for an element you don't want to display. Just display:none would have sufficed.

How can I make responsive vertical menu that shrinks when screen's width is less than 800px?

To make the element fade out when the page width gets smaller than 800px, for screensizes bigger than 800px, you need to give the list items a position of relative, set the list items left property to 0 and opacity to 1 so that they'll be displayed normally, and for screensizes smaller than 800px, change the left value to 100% and opacity to 0 so that it'll not be displayed anymore. next set its transition property for all screen sizes to 'all 1s ease-in-out' so the sliding will be smooth.

for the icon and the item to be displayed on the same line, just set the display of the li containing the item and the icon to flex and their align-items property to center so they'll be horizontally aligned.

@media only screen and (max-width: 800px) {
  .hide-800 {
    left: 100%;
    opacity: 0;
  }
}

@media only screen and (min-width: 800px) {
  .hide-800 {
    left: 5px;
    opacity: 1;
  }
}

.item {
  position: relative;
  transition: all 1s ease-in-out;
}

.row {
  display: flex;
  position: relative;
  align-items: center;
}

.list {
  overflow: hidden;
}

<body>
  <ul class='list'>
    <li class="row">
      <span class="icon">icon1</span>
      <div class="item hide-800">item1</div>
    </li>
    <li class="row">
      <span class="icon">icon2</span>
      <div class="item hide-800">item2</div>
    </li>
    <li class="row">
      <span class="icon">icon3</span>
      <div class="item hide-800">item3</div>
    </li>
  </ul>
</body>

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>

Bootstrap nav collapsing in a row instead of vertically

Well The nav nav-pills classes are the difference between your code and bs example

  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>

This is bootstrap's example and as you can see it uses navbar-nav Not nav nav-pills

If you want to use .nav-pills , you should set these classes to your .nav element

flex-column flex-sm-row

The flex-column class set's flex-direction: column; to your element and flex-sm-row restores that change on devices that are larger than sm (larger than 576px)

Always expanded vertical bootstrap navbar for mobile

You just need to remove the collapse class from navbar-collapse. (and remove the toggler if you don't want it to be toggleable)

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <div id="footerResponsive" class="navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">item 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">item 2</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Demo: https://codeply.com/go/AaSHYpIBGk

A Bootstrap 4 navbar is vertical instead of horizontal?

By default, Bootstrap’s navbar is collapsed for mobile devices. This results in a vertical layout. You can add the navbar-expand class to expand it to a horizontal layout. This can be dependent on screen size as well, using typical Bootstrap method: for example navbar-expand-lg.

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

https://getbootstrap.com/docs/4.0/components/navbar/