rocket-3d/templates/assets/components/main-nav.html

<div id="main-bar">
    <div id="logo-container">
            <a href="/">
            <img class="logo" src= "img/Logo.svg">
        </a>
    </div>
    <nav class="main-navigation-bar">
            <ul>
            <li><a href="experiments.html">EXPERIMENTS</a>
                    <ul id="experiments">
                        <li><a href="oils.html">Oils</a></li>
                        <li><a href="flower.html">Flower</a></li>
                        <li><a href="edibles.html">Edibles</a></li>
                    </ul>
    </ul>

    <ul>
            <li><a href="permaculture.html">PERMACULTURE</a>
                    <ul>
                            <li><a class="pc" href="permapp.html">PermApp</a></li>
                            <li><a class="pc" href="greenlab.html">GreenLab</a></li>
                            <li><a class="pc"id="edit" href="whatsthat.html">What's that ?</a></li>
                    </ul>
    </ul>

    <ul>
            <li><a href="greentech.html">GREENTECH</a>
                    <ul>
                            <li><a href="automation.html">Automation</a></li>
                            <li><a href="iot.html">IoT</a></li>
                            <li><a href="diy.html">DiY</a></li>
                    </ul>
    </ul>

    <ul>
            <li><a href="spider.html">SPIDER</a>
                    <ul>
                            <li><a href="spiderpi.html">SpiderPi</a></li>
                            <li><a href="join.html">Join</a></li>
                    </ul>
    </ul>

    <ul>
            <li><a href="learn.html">LEARN</a>
                    <ul id="learn">
                            <li id="broad" ><a href="whoweare.html">About Us</a></li>
                            <li><a href="partners.html">Partners</a></li>
                            <li><a href="meet.html">Meet</a></li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="code.html">Code</a></li>

                    </ul>
    </ul>
    </nav>
    <nav class="hamburger-wrap">
            <input type="checkbox" class="ham-btn" id="ham-btn">
            <label for="ham-btn" class="hamburger" id="hamburger" onclick= "menu()" onclick="hide()">
                    <span class="hamburger-icon"></span>
            </label>
    </nav>  
    <div id="mobile-dropdown-container">
            <div id="mobile-dropdown">
                    <ul>
                            <li onclick="menu2()"><a href="experiments.html">EXPERIMENTS</a>
                                    <span class="drop">
                                            <i class="arrow down"></i>
                                    </span>
                                    <ul id="down">
                                        <li><a href="oils.html">Oils</a></li>
                                        <li><a href="flower.html">Flower</a></li>
                                        <li><a href="edibles.html">Edibles</a></li>
                                    </ul>
                    </ul>
    
                    <ul>
                            <li onclick="menu3()"><a href="permaculture.html">PERMACULTURE</a>
                                    <span class="drop">
                                            <i class="arrow down"></i>
                                    </span>
                                    <ul id="down1">
                                            <li><a href="permapp.html">PermApp</a></li>
                                            <li><a href="greenlab.html">GreenLab</a></li>
                                            <li><a href="whatsthat.html">What's that ?</a></li>
                                    </ul>
                    </ul>
    
                    <ul>
                            <li onclick="menu4()"><a href="greentech.html">GREENTECH</a>
                                    <span class="drop">
                                            <i class="arrow down"></i>
                                    </span>
                                    <ul id="down2">
                                            <li><a href="automation.html">Automation</a></li>
                                            <li><a href="iot.html">IoT</a></li>
                                            <li><a href="diy.html">DiY</a></li>
                                    </ul>
                    </ul>
    
                    <ul>
                            <li onclick="menu5()"><a href="spider.html">SPIDER</a>
                                    <span class="drop">
                                            <i class="arrow down"></i>
                                    </span>
                                    <ul id="down3">
                                            <li><a href="spiderpi.html">SpiderPi</a></li>
                                            <li><a href="join.html">Join</a></li>
                                    </ul>
                    </ul>
    
                    <ul>
                            <li onclick="menu6()"><a href="learn.html">LEARN</a>
                                    <span class="drop">
                                            <i class="arrow down"></i>
                                    </span>
                                    <ul id="down4">
                                            <li><a href="whoweare.html">About Us</a></li>
                                            <li><a href="partners.html">Partners</a></li>
                                            <li><a href="meet.html">Meet</a></li>
                                            <li><a href="blog.html">Blog</a></li>
                                            <li><a href="code.html">Code</a></li>
    
                                    </ul>
                    </ul>
                    </nav>
                    <a class="button" href="#">Shop</a>
            </div>
    </div>     
</div>