How can I set my sidebar with a fixed width?

Question

I have a code: Codepen.io.

<div class="container-fluid h-100">
        <div class="row wrapper h-100">
            <aside class="col-12 col-sm-3 p-0 bg-dark">
                <nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
                    <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
                    <a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
                       <span class="navbar-toggler-icon"></span>
                    </a>
                    <div class="collapse navbar-collapse sidebar">
                        <ul class="flex-column navbar-nav w-100 justify-content-between">
                            <li class="nav-item">
                                <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
                                    <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
                                </a>
                                <div class="collapse" id="m1">
                                    <ul class="flex-column nav">
                                        <a class="nav-link px-0 text-truncate" href="#">Sub</a>
                                        <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
                                    </ul>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </aside>
            <main class="col bg-faded py-3">
</main></div></div>

But I need to set fixed width left sidebar for all resolutions, except in mobile view I need to see like now (top menu with hamburger). What I need to do?

try overriding the nav boot-strap class in your css – RA'sal Dec 24 '18 at 13:40 — RA'sal, Dec 24 '18 at 13:40
@Zim questions is not resolved. I left this venture. – Guedda Mar 21 '19 at 15:05 — Guedda, Mar 21 '19 at 15:05

score 0 · Accepted Answer · answered Dec 25 '18 at 12:43

Use a media query for Bootstrap's sm breakpoint and set min/max width in the "sidebar"...

@media (min-width: 768px) {
    aside.col-sm-3 {
        min-width: 200px;
        max-width: 200px;
    }
}

https://www.codeply.com/go/LsMGLozRq0

Also see: Bootstrap 4: responsive sidebar menu to top navbar

How can I set my sidebar with a fixed width?

1 Answers1