I have a vertical “sidebar” menu on my side. I want this menu to become a horizontal “top” menu on smaller size screens such as phones.
How can I achieve this, ideally using Bootstrap 5 classes?
Currently the sidebar appears above the content on smaller screens, but still vertically.
:root {
--black: #0B1721;
--cyan: #21B7FF;
--magenta: #FF217D;
}
.nav {
align-items: flex-end;
}
.nav-pills .nav-link {
width: fit-content;
}
.nav-pills .nav-link.active {
color: var(--black) !important;
background-color: var(--cyan);
}
.nav-pills .nav-link:not(.nav-link.active) {
color: var(--cyan) !important;
cursor: pointer;
}
.nav-pills .nav-link:hover > .nav-title {
display: inline !important;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row">
<div class="col-lg-11 col-sm-12 order-lg-1 order-2">
CONTENT
</div>
<div class="col-lg-1 col-sm-12 order-lg-2 order-1">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<i class="fa-solid fa-book"></i>
<span class="d-none nav-title">Test</span>
</a>
</li>
<li>
<a class="nav-link" data-id="tags">
<i class="fa-solid fa-tags"></i>
<span class="d-none nav-title">Tags</span>
</a>
</li>
</ul>
</div>
</div>