HTML example:

<div class="mainmenu-area hamburger transparent">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 row-flex">
                <div class="site-brand solid">
                    <a href="#" class="logo">Jupiter</a>
                </div>
                <button class="burger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </button>
                <div class="mainmenu">
                    <ul class="nav">
                        <li><a href="#home-area">Home</a></li>
                        <li><a href="#service-area">Service</a></li>
                        <li><a href="#about-area">About</a></li>
                        <li><a href="#gallery-area">Gallery</a></li>
                        <li><a href="#testimonial-area">Testimonial</a></li>
                        <li><a href="#price-area">Price</a></li>
                        <li><a href="#contact-area">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Mainmenu-Area-End -->