Search code examples
csstwitter-bootstrapbootstrap-4navnav-pills

Switch between nav-pills on large screen and navbar-nav on smaller screen with Bootstrap 4

I like the look of the nav pills on larger screens, but once the collapse button shows I want that menu to be stackable and look like the image attached instead of the pills. Do I need custom css to make this happen?

<div id="menu" class="navbar navbar-expand-md">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".main-nav-collapse" aria-controls="main-nav-collapse" aria-expanded="true" aria-label="Toggle navigation">
        <span class="fa fa-bars"></span>
    </button>
    <div class="collapse navbar-collapse main-nav-collapse">
        <nav class="nav nav-pills mr-auto">
            <a class="nav-link" href="/"><i class="fa fa-home"></i></a>
        </nav>
    </div>
</div>

Want this on smaller screens

NavBar-Nav

Want these pills on larger screens but not smaller

Nav Pills Only

Solution

  • I accomplished this with the below code.

    <nav class="nav nav-pills mr-auto flex-column d-md-flex flex-md-row">