Navigation

<div class="navbar navbar-default karndean-main-trigger hidden-xs">
    <button type="button" class="navbar-toggle toggle-panel panel-one">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <i style="display: none"></i>
        <p class="remove-when-open">Menu</p>
        <p class="hidden show-when-open">Hide</p>
    </button>

    <button type="button" class="karndean-main-trigger_button navbar-toggle panel-two">
       <i class="style-finder"></i>
        <p class="remove-when-open">Style Finder</p>
        <p class="hidden show-when-open">Hide</p>
    </button>


    <button type="button" class="karndean-main-trigger_button navbar-toggle panel-three">
        <i class="mood-board"></i>
        <p class="remove-when-open">Mood Board</p>
        <p class="hidden show-when-open">Hide</p>
    </button>
</div>




<nav id="nav-one" class="scotch-panel">
    <div class="navbar navbar-default karndean-main-trigger hidden-sm hidden-md hidden-lg">
        <button type="button" class="navbar-toggle toggle-panel panel-one">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <i style="display: none"></i>
            <p class="remove-when-open">Menu</p>
            <p class="hidden show-when-open">Hide</p>
        </button>

        <button type="button" class="karndean-main-trigger_button navbar-toggle panel-two">
            <i class="style-finder"></i>
            <p class="remove-when-open">Style Finder</p>
            <p class="hidden show-when-open">Hide</p>
        </button>


        <button type="button" class="karndean-main-trigger_button navbar-toggle panel-three">
            <i class="mood-board"></i>
            <p class="remove-when-open">Mood Board</p>
            <p class="hidden show-when-open">Hide</p>
        </button>
    </div>

    <div class="scotch-panel_close hidden-sm hidden-md hidden-lg"><button class="closeAll" href=""><i class="leftArrow"></i>
        <span>Hide</span>
    </button>
    </div>
    <ul class="list-unstyled main-menu">
        <li><a href="">Login</a></li>
        <li>

            <div class="panel-group menu-expanding" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="" role="tab" id="headingOne">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Browse all floors

                            </a>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <ul class="list-unstyled">
                                <li><a href="">Lorem ipsum 1</a></li>
                                <li><a href="">Lorem ipsum 2</a></li>
                                <li><a href="">Lorem ipsum 3</a></li>
                                <li><a href="">Lorem ipsum 4</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>



        </li>
        <li>

            <div class="panel-group menu-expanding" id="accordion2" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="" role="tab" id="headingOne2">
                        <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
                            Browse all floors

                        </a>
                    </div>
                    <div id="collapseOne2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <ul class="list-unstyled">
                                <li><a href="">Lorem ipsum 1</a></li>
                                <li><a href="">Lorem ipsum 2</a></li>
                                <li><a href="">Lorem ipsum 3</a></li>
                                <li><a href="">Lorem ipsum 4</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </li>
        <li><a href="">Our Designflooring Ranges</a></li>
        <li><a href="">LooseLay & Palio Clic</a></li>
        <li><a href="">Order Cleaning Products</a></li>
        <li><a href="">Explore by Room</a></li>
        <li><a href="">Get Inspired</a></li>
        <li><a href="">Guides & Resources</a></li>
        <li><a href="">Explore by Room</a></li>
        <li><a href="">Get Inspired</a></li>
        <li><a href="">Guides & Resources</a></li>

        <div class="local-retailer">
            <p class="local-retailer_find">Find your local retailer</p>
            <div class="cs local-retailer_search">
                <section style="width: 100%; display: table;">
                    <div class="searchInputHeader" style="display: table-cell; width: 100%;">
                        <input style="width: 100%; padding: .5em 1em;" id="postcodeTextSide" type="text" placeholder="Enter town, city or zip code" autocomplete="off">
                    </div>
                    <div class="buttonInputHeader">
                        <button style="color: black; padding: 0.6em 1.6em; white-space: nowrap;" class="btn btn-default" type="submit" onclick="FindRetailer('postcodeTextSide');">Find</button>
                    </div>
                </section>
            </div>
        </div>
    </ul>

</nav>

<nav id="panel-2" class="scotch-panel">
    <div class="navbar navbar-default karndean-main-trigger hidden-sm hidden-md hidden-lg">
        <button type="button" class="navbar-toggle toggle-panel panel-one">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <i style="display: none"></i>
            <p class="remove-when-open">Menu</p>
            <p class="hidden show-when-open">Hide</p>
        </button>

        <button type="button" class="karndean-main-trigger_button navbar-toggle panel-two">
            <i class="style-finder"></i>
            <p class="remove-when-open">Style Finder</p>
            <p class="hidden show-when-open">Hide</p>
        </button>


        <button type="button" class="karndean-main-trigger_button navbar-toggle panel-three">
            <i class="mood-board"></i>
            <p class="remove-when-open">Mood Board</p>
            <p class="hidden show-when-open">Hide</p>
        </button>
    </div>
    <div class="scotch-panel_icon"><i class="style-finder"></i></div>
    <div class="scotch-panel_close hidden-sm hidden-md hidden-lg"><button class="closeAll" href=""><i class="leftArrow"></i>
        <span>Hide</span>
    </button>
    </div>
    <ul class="list-unstyled main-menu">
        <li><a href="">View All <span class="bolded">Style Finder Projects</span></a></li>
        <li><a href="">Bathroom</a></li>
        <li><a href="">Kitchen</a></li>
        <li><a href="">Living room 3</a></li>
        <li><a href="">Start a new project</a></li>
    </ul>
</nav>


<nav id="panel-3" class="scotch-panel">
    <div class="navbar navbar-default karndean-main-trigger hidden-sm hidden-md hidden-lg">
        <button type="button" class="navbar-toggle toggle-panel panel-one">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <i style="display: none"></i>
            <p class="remove-when-open">Menu</p>
            <p class="hidden show-when-open">Hide</p>
        </button>

        <button type="button" class="karndean-main-trigger_button navbar-toggle panel-two">
            <i class="style-finder"></i>
            <p class="remove-when-open">Style Finder</p>
            <p class="hidden show-when-open">Hide</p>
        </button>


        <button type="button" class="karndean-main-trigger_button navbar-toggle panel-three">
            <i class="mood-board"></i>
            <p class="remove-when-open">Mood Board</p>
            <p class="hidden show-when-open">Hide</p>
        </button>
    </div>
    <div class="scotch-panel_icon"> <i class="mood-board"></i></div>
    <div class="scotch-panel_close hidden-sm hidden-md hidden-lg"><button class="closeAll" href=""><i class="leftArrow"></i>
        <span>Hide</span>
    </button>
    </div>
    <ul class="list-unstyled main-menu">

        <li><a href="">View All <span class="bolded">Moodboards</span></a></li>
        <li><a href="">Bedroom Inspiration</a></li>
        <li><a href="">Kitchen ideas</a></li>
        <li><a href="">Wood floors</a></li>
        <li><a href="">Stone favourites</a></li>
        <li><a href="">Wood favourites</a></li>
    </ul>
</nav>