Menu icon Foundation
Problem with toggle-topbar and dropdown

I have a topbar that works perfectly when it's streched, however, when reduced, there is a problem with the dropdown.
The "Back" button is repeated the same number of itens in the menu.

Img1

Img2

<div class="row">
    <div class="large-12 columns">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name"> </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
            </ul>
            <section class="top-bar-section">                               
                <ul class="left">
                    <li><a href="#" id="btnMenuInicio">Início</a></li>
                    <li class="has-dropdown"> <a href="#">Armtec</a>
                    <ul class="dropdown">
                        <li><a href="#" id="btnMenuAEmpresa">A Empresa</a></li>
                        <li><a href="#" id="btnMenuPremios">Prêmios</a></li>
                        <li><a href="#" id="btnMenuRepresentanteComercial">Representação comercial</a></li>
                    </ul>
                    </li>
                    <li><a href="#" id="btnMenuParceiros">Parceiros</a></li>
                    <li><a href="#" id="btnMenuAssociados">Associda à(ao)</a></li>
                    <li><a href="#" id="btnMenuProdutos">Produtos</a></li>
                    <li><a href="#" id="btnMenuDownload">Download</a></li>
                    <li><a href="#" id="btnMenuNewsAndClippings">Notícias e clipping</a></li>
                    <li><a href="#" id="btnMenuCdastro">Cadastro</a></li>
                    <li><a href="#" id="btnMenuContato">Contato</a></li>
                </ul>
            </section>
        </nav>
    </div>
</div>
            

         

top bardropdowntoggle-topbarbuttonmenu

I have a topbar that works perfectly when it's streched, however, when reduced, there is a problem with the dropdown.
The "Back" button is repeated the same number of itens in the menu.

Img1

Img2

<div class="row">
    <div class="large-12 columns">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name"> </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
            </ul>
            <section class="top-bar-section">                               
                <ul class="left">
                    <li><a href="#" id="btnMenuInicio">Início</a></li>
                    <li class="has-dropdown"> <a href="#">Armtec</a>
                    <ul class="dropdown">
                        <li><a href="#" id="btnMenuAEmpresa">A Empresa</a></li>
                        <li><a href="#" id="btnMenuPremios">Prêmios</a></li>
                        <li><a href="#" id="btnMenuRepresentanteComercial">Representação comercial</a></li>
                    </ul>
                    </li>
                    <li><a href="#" id="btnMenuParceiros">Parceiros</a></li>
                    <li><a href="#" id="btnMenuAssociados">Associda à(ao)</a></li>
                    <li><a href="#" id="btnMenuProdutos">Produtos</a></li>
                    <li><a href="#" id="btnMenuDownload">Download</a></li>
                    <li><a href="#" id="btnMenuNewsAndClippings">Notícias e clipping</a></li>
                    <li><a href="#" id="btnMenuCdastro">Cadastro</a></li>
                    <li><a href="#" id="btnMenuContato">Contato</a></li>
                </ul>
            </section>
        </nav>
    </div>
</div>
            

         
Bruno Macabeus almost 6 years ago

Thanks, but....
Erasing the lines suggested by Mohammed Asaduallah causes the "Back" button is no longer inserted.

This does not solve the problem.

Asif almost 6 years ago