Bootstrap horizontal menu collapse to sidemenu

Question

For a website I need one horizontal menu in Bootstrap 4 (.container) after the header (.container-fluid) which should collapse into right sidebar using slideout.js.

Currently I have horizontal menu (code below) but I can't figure out how to properly collapse items for slideout. How can I do it?

I can't load two menus. If there is any solution I am open to suggestions.

<nav class="navbar navbar-expand-md navbar-light bg-light m-0 p-0" id="menu">
<div class="container">

    <div class="collapse navbar-collapse" id="sidebar">
        <ul class="navbar-nav mr-auto col align-self-center justify-content-center">

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Title
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="link">@lang('titles.link')</a>

                    <a class="dropdown-item" href="link">@lang('titles.link')</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>        

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="somesite1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    @lang('titles.somesite')
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="somesite1">

                    <a class="dropdown-item" href="{{url(trans('routes.somesite'))}}">@lang('titles.somesite')</a>           

                </div>
            </li>

        </ul>
    </div>
</div>

<div class="container-fluid main-header p-0 m-0 fixed">
<div class="container header">
    <div class="row text-sm-center text-md-left text-center">

        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" style="z-index:1000">
            <a class="navbar-brand" href="{{url('/', [app()->getLocale()])}}">
                <img src="{{asset('logos/logo.png')}}" class="nav-logo" alt="Logo">
            </a>

            <button class="navbar-toggler d-md-none menu-icon" type="button" id="toggle-button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="true" aria-label="Toggle navigation">
                <span class="navicon"></span>
            </button>

        </div>


        <div class="col-md-4 text-md-right d-none d-md-block phone-data">
         some phone data

        </div>
    </div>
</div>
</div>
@includeIf('components.navigation')

<main id="panel">

</main>

Scandent

"which should collapse into right sidebar using slideout.js" -- please post the code for slideout.js too. Is there other CSS? – Aluminize

For slideout I am using custom css (provided one). Main problem is collapsing bootstrap navbar items in to mobile dropdown. I need dropdown as multilevel dropdown of items not some kind of a popup. github.com/Mango/slideout – Scandent

Answer 1

I wouldn't know how to mix slideout.js with Bootstrap 4. Instead, I would just position the navbar to the right side as needed on mobile using a @media query. Update the .collapse transition animation for a slide-in effect...

https://codeply.com/go/ocWMygpYGK

@media (max-width: 992px) {
    #sidebar.collapse {
      position: fixed;
      z-index: 2000;
      transition: all .3s ease;
      top: 0;
      bottom: 0;
      right: -30%; /* -width of sidebar */
      width: 0;
      height: 100% !important;
      display: block;
    }

    #sidebar.collapsing {
        transition: all .18s ease-in;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -30%;  /* -width of sidebar */
        width: 30%;  /* width of sidebar */
        height: 100% !important;
        display: block;
    }

    #sidebar.collapse.show {
        right: 0;
        width: 30%;  /* width of sidebar */
    }
 }

Also, note that the -xs infix is no longer used in Bootstrap 4. It's just col-12.

Aluminize

Thanks. I will definetly try. How would you collapse dropdown into rows? Like on this example codyhouse.co/demo/secondary-expandable-navigation/index.html – Scandent