как свернуть несколько навигационных панелей и их содержимое по нажатию кнопки на адаптивном экране с помощью HTML, CSS и начальной загрузки

Question

я создаю веб-страницу, у меня есть три div в качестве панели навигации, на первом div есть кнопка регистрации с текстом во втором аккаунте div и меню входа и на третьем div на главной панели навигации со ссылками

я хочу свой заголовоккак показано на экране адаптивного изображения / мобильного экрана:

как этого добиться с помощью html css или с помощью jquery

что я сделалэто

    <header>
            <div class="upper-signup-section">
                <div class="container">
                    <div class="signup">
                        <div class="discount-text">
                            <p>Lorem ipsum text</p>
                        </div>
                        <input type="button" class="btn button-default" value="SignUp"/>
                    </div>
                </div>
            </div>

            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="upper-right menu pull-right">
                        <ul class="upper-menulist">
                            <li><a href="#">SIGN UP</a></li> |
                            <li><a href="#">LOGIN</a></li>
                        </ul>
                    </div>
                    <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand logo img-responsive" href="#">Logo</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                      </ul>
                      <ul class="nav navbar-nav navbar-right">                    
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle price" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">INR<span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                <li><a href="#">500</a></li>
                                <li><a href="#">200</a></li>
                              </ul>
                            </li>
                      </ul>
                    </div>
                </div>
            </nav>
        </header>