CODEWITHSUNDEEP
htmlcsswebfrontend
bogdan
bogdan

Reputation: 667

Can I make the Bootstrap 4 navbar switch to a column instead of collapsing?

I would prefer that all my menu items remain visible at all times, and simply switch from a centered row formation into a centered column when the screen size is too small.

 <div style="position: sticky; top: 0px;"> 


    <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar9">
        <span class="navbar-toggler-icon"></span>           
    </button>     this is the fricking collapse button -->

    <div class="navbar-collapse collapse" id="navbar10">
        <ul class="navbar-nav nav-fill w-100">
            <li class="nav-item">
                <a class="nav-link" href="#">aaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">bbb</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ccc</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ddd</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">eee</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ffff</a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 4651

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You can use the regular bootsrap class used to build your layout and drop the collapsing navbar classes: see https://getbootstrap.com/docs/4.0/utilities/flex/

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

example with :flex-md-row class (play snippet in fullpage and resize windows to see it toggling row/column. You can try also flex-lg-row if you think it turns into column too late.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="navbar " id="navbar10">
        <ul class="navbar-nav nav-fill w-100 flex-md-row">
            <li class="nav-item">
                <a class="nav-link" href="#">aaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">bbb</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ccc</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ddd</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">eee</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ffff</a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 3

Jared Bledsoe
Jared Bledsoe

Reputation: 559

Using CSS media queries, you can set specific break-points to change your elements. In this example, if the window is less than 480px then we can adjust the width to 100%.

(To see it in action, click run > full page > then resize window)

.navTitle {
  width: 20%;
  float: left;
  background-color: lightGrey;
  outline: 1px solid black;
}

@media screen and (max-width: 480px) {
    .navTitle {
       width: 100%;
    }
}
<div class="navTitle">
 <p>Section 1</p>
</div>

<div class="navTitle">
 <p>Section 2</p>
</div>

<div class="navTitle">
 <p>Section 3</p>
</div>

<div class="navTitle">
 <p>Section 4</p>
</div>

<div class="navTitle">
 <p>Section 5</p>
</div>

Upvotes: 1

Related Questions