Botão e menu personalizado no Bootstrap

<nav class="navbar fixed-top bg-danger navbar-dark">

    <button id="showMenu" class="btn dropdown-toggler" type="button">

        <span class="navbar-toggler-icon"></span>

    </button>

    <a href="#" class="navbar-brand">LOGO</a>

    <!-- links -->

    <div id="menu" class="dropdown-menu">

        <a class="dropdown-item" href="#">Home</a>

        <a class="dropdown-item" href="#">Quem somos</a>

        <a class="dropdown-item" href="#">Serviços</a>

        <a class="dropdown-itm" href="#" id="menu_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sites</a>

        <div class="dropdown-menu2">

            <a href="http://diegomariano.com" class="dropdown-item">Diego</a>

            <a href="http://alfahelix.com.br" class="dropdown-item">Alfahelix</a>

        </div>

        <a class="nav-link" href="#">Fale conosco</a>

    </div>



    <form class="form-inline">

        <div class="input-group">

            <input type="text" placeholder="Buscar" name="buscar" class="form-control input-group-prepend">

            <input type="submit" class="btn btn-success input-group-append">

        </div>

    </form>

</nav>



<script>

    showMenu.addEventListener("click", function () {

        var visivel = menu.style.display == "block";

        menu.style.display = (visivel? "none":"block&quot;

    })

</script>