Foundation 5 top bar - disable default behaviour in mobile view for right hand links

Question

I need help customising foundations top-bar menu. I have a pretty standard top bar set up with a left hand menu and a right hand menu.

The default foundation behaviour on a mobile is for both right and left menus to be combined as a single drop down with a menu icon the right hand side.

I want to change this behaviour somehow so that the right and left hand menus are separate. I would want the left hand menu to use the default behaviour but I would need the menu icon to be moved to the left. I want to disable the default behaviour for the right hand menu so that these remain the same on all screen sizes. Below is an image of what I want to achieve.

Anyone got any idea where I would start with this?

    <nav class="top-bar" data-topbar >
        <ul class="title-area">
            <!-- Title Area -->
            <li class="name">&nbsp;</li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
        </ul>
        <section class="top-bar-section">
            <!-- main nav section -->
            <ul class="left">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
                <li class="has-dropdown"><a href="#">Links</a>
                    <ul class="dropdown">
                        <li><a href="#" class="">Dropdown Level 1</a></li>
                        <li><a href="#">Dropdown Option</a></li>
                        <li><a href="#">Dropdown Option</a></li>
                    </ul>
                </li>
            </ul>
            <!--Language, account, currency section-->
            <ul class="right">
                <li class="has-dropdown" id="account">
                    <a href="#" class="top-bar-colour1"><i class="fi-en"></i></a>
                    <ul class="dropdown"><li><a href="#">Languages</a></li></ul> 
                </li>
                <li class="has-dropdown" id="basket">
                    <a href="#" class="top-bar-colour2"><i class="fi-dollar"></i></a>
                    <ul class="dropdown"><li><a href="#">Currency</a></li></ul>
                </li>
                <li class="has-dropdown" id="currency">
                    <a href="#" class="top-bar-colour3"><i class="fi-lock medium"></i></a>
                    <ul class="dropdown"><li><a href="#">Login</a></li></ul>
                </li>
            </ul>
        </section>
    </nav>

Many thanks,

Answer 1

LIVE DEMO

<div class="off-canvas-wrap">
    <div class="inner-wrap">
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </aside>
        <nav class="tab-bar show-for-small">

            <section class="top-bar-section">                        <!-- main nav section Left Nav Section--> 
                    <ul class="left">
                        <div class="right small-6">
                            <ul class="row">
                                <li class="has-dropdown not-click small-4 columns" id="account">
                                    <a href="#" class="top-bar-colour1"><i class="fi-en">icon</i></a>
                                    <ul class="dropdown">
                                        <li class="active"><a href="#">Languages</a></li> 
                                    </ul> 
                                </li>
                                <li class="has-dropdown not-click small-4 columns" id="basket">
                                    <a href="#" class="top-bar-colour2"><i class="fi-dollar">icon</i></a>
                                    <ul class="dropdown not-click">
                                        <li class="active"><a href="#">Currency</a></li>
                                    </ul>
                                </li>
                                <li class="has-dropdown not-click small-4 columns" id="currency">
                                    <a href="#" class="top-bar-colour3"><i class="fi-lock medium">icon</i></a>
                                    <ul class="dropdown">
                                        <li  class="active"><a href="#">Login</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <a class="left-off-canvas-toggle menu-icon">
                            <span></span>
                        </a>
                    </ul>   
                </section>
        </nav>

        <div class="contain-to-grid fixed">
            <nav class="top-bar hide-for-small" data-topbar>
                <section class="top-bar-section">
                    <ul class="title-area left">
                        <li class="name hide-for-small">
                            <a></a>
                        </li>
                    </ul>

                    <!-- main nav section Left Nav Section-->
                    <ul class="left">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="has-dropdown not-click">
                            <a href="#">Links</a>
                            <ul class="dropdown">
                                <li class="active"><a href="#">Dropdown Level 1</a></li>
                                <li><a href="#">Dropdown Option</a></li>
                                <li><a href="#">Dropdown Option</a></li>
                            </ul>
                        </li>
                    </ul>   
                        <!--Language, account, currency section Right Nav Section-->
                    <ul class="right">
                        <li class="has-dropdown not-click" id="account">
                            <a href="#" class="top-bar-colour1"><i class="fi-en">icon</i></a>
                            <ul class="dropdown">
                                <li class="active"><a href="#">Languages</a></li> 
                            </ul> 
                        </li>
                        <li class="has-dropdown not-click" id="basket">
                            <a href="#" class="top-bar-colour2"><i class="fi-dollar">icon</i></a>
                            <ul class="dropdown not-click">
                                <li class="active"><a href="#">Currency</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown not-click" id="currency">
                            <a href="#" class="top-bar-colour3"><i class="fi-lock medium">icon</i></a>
                            <ul class="dropdown">
                                <li  class="active"><a href="#">Login</a></li>
                            </ul>
                        </li>
                    </ul>
                </section>
            </nav>
        </div> <a class="exit-off-canvas" href="#"></a>
        <article class="small-12 columns">
            <main>
            </main>
        </article>
        <footer class="small-12 columns">

        </footer>
    </div>
</div>