Как сделать Выезжающую строку поиска для меню в Bootstrap?

Question

[Grigore Rosca]

Добрый день. Я начинающий вордпресс разработчик. Я делаю свой первый шаблон для Вордпресса.
Мне нужно сделать в шапку сайта, в раздел меню функцию поиск. Я многое пробывал но мне не получаеться. Может кто-то мне помочь ?

- В меню (правая сторона) есть иконка поиск, при клике на нее - разделы меню должны скрываться и вместо них должно отображаться строка поиска. При клике на иконку крестик - поисковая строка скрываеться а разделы меню отображаються (ajax загрузка или css)
- В меню (левая сторона) есть иконка квадратики, при клике на нее - разделы меню должны скрываться и вместо них должно отображаться категории постов. При клике на иконку крестик - категории постов скрываються а разделы меню отображаються (ajax загрузка или css)

Демо на картинке:



Вот готовый код что я уже сделал:

<div class="container">
	<nav class="navbar-default" role="navigation">
    <div class="container-fluid">
	
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
      
	    <a href="#" class="navbar-brand hidden-xs"><span class="dripicons-view-thumb"></span></a>
	  
        <a href="#" class="navbar-brand pull-right hidden-xs"><span class="dripicons-search"></span></a>
       
        <div class="navbar-collapse collapse">
           <?php
				wp_nav_menu( array(
				'theme_location' => 'primary-menu',
				'depth' => 2,
				'container' => false,
				'menu_class' => 'nav navbar-nav',
				'fallback_cb' => 'wp_page_menu',
				'walker' => new wp_bootstrap_navwalker())
				);
			?>
        </div>

    </div>
</nav>
</div>

<script type="text/javascript">
	$(document).ready(function () {
			  $(".navbar-toggle").on("click", function () {
				    $(this).toggleClass("active");
			  });
		});
</script>