Как показывать пункты меню по горизонтали на больших экранах по нажатию кнопки «Гамбургер» в Bootstrap 4.1

Question

Я хочу сделать что-то вроде этого, но навигационная панель и значки должны находиться друг в друге

В этом коде я получаю строку меню в левой части и логотип в правой части экрана. И щелчок по пунктам меню кнопки гамбургера показывается по столбцам. Я хочу, чтобы это было по строкам, как в ссылке, приведенной ниже.

Ссылка: https://www.plebiscite.in

<nav class="navbar navbar-dark bg-transparent">
    <div class="col-xs-10">
        <button class="navbar-toggler" style="background-color: rgba(70, 
    238, 
      191, 0.83)" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria- controls="navbarSupportedContent" aria-expanded="false" aria- label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link text-white" href="#">Home <span 
                class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#about">ABout Me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#service">Our Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#portfolio">Our Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#pricing">Our Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#team">Our Team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#blog">Our Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#contact">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-xs-2 pt-0 mt-0">
        <a class="navbar-brand" href="#">
            <img src="/Content/images/logo_blog.png" width="60" alt="">
        </a>
    </div>
</nav>