Bootstrap меню и гамбургер вместе

Проверьте этот пример и попробуйте адаптировать его к вашему случаю:

codepen.io/Plagu33/pen/yoNOJw

Пример меню гамбургера Вы можете посмотреть на getbootstrap.com:

<

nav class = "navbar navbar-inverse navbar-static-top" role = "navigation">
  <div class = "container">
    <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1">
                    <span class = "sr-only">Toggle navigation</span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
      <ul class = "nav navbar-nav">
        <li><a href = "index.php">Home</a></li>
        <li><a href = "about.php">About</a></li>
        <li><a href = "#portfolio">Portfolio</a></li>
        <li><a href = "#">Blog</a></li>
        <li><a href = "contact.php">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Если вы зайдете на официальный сайт bootstrap. https://getbootstrap.com/docs/4.0/components/navbar/ , примеров навбара очень много.

Основная идея - точка останова экрана. Чтобы решить, на какой точке останова показывать значок hamburger.

В bootstrap-4 это контролируется служебным классом navbar-expand-X. Так что, если мы хотим показать наш значок гамбургера, когда размер экрана средний и ниже, мы будем использовать navbar-expand-md на родительском элементе nav.

<nav class = "navbar navbar-expand-md navbar-light bg-light">...</nav>

Bootstrap предоставит свои собственные стили для панели навигации, которые мы затем можем переопределить нашими собственными стилями в зависимости от наших требований.