locked
vertical bootstrap menu does not show hamburger RRS feed

  • Question

  • User-909867351 posted

    Please look at my code:

    <nav class="navbar  bg-light">         
        <ul class="navbar-nav vertical-nav">
            <!-- Collapse button -->   
            <li class="nav-item">
                <a class="nav-link" href="entrada.aspx"><i class="fas fa-address-card"></i>Home</a>
            </li>
             <li class="nav-item">
                <a class="nav-link" href="novoedificio.aspx?edificios=1"><i class="fas fa-address-card"></i>Edifício</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="planocontas.aspx?planocontas=1"><i class="fas fa-address-card"></i>Plano de contas</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="novafracao.aspx?fracao=2"><i class="fas fa-address-card"></i>Frações</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="novoseguro.aspx"><i class="fas fa-address-card"></i>Seguros</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="novobanco.aspx?bancos=1"><i class="fas fa-address-card"></i>Bancos</a>
            </li>
            <li class="nav-item dropdown">
                                    <div class="btn-group dropright">
                                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop66u" data-toggle="dropdown">Movimentos
                                        </a>
                                        <div class="dropdown-menu ">
                                            <a class="dropdown-item" href="receita.aspx?receita=2">Receita</a>
                                            <a class="dropdown-item" href="despesa.aspx?despesa=2">Despesa</a>
                                            
                                        </div>
                                    </div>
                                </li>
     </ul>
                        </nav>

    Why the hamburguer does not when I reduce the screen size?

    Thank you

    You can see the resut at:  https://condominios.programamos.pt/entrada.aspx

    Monday, December 9, 2019 7:25 PM

Answers

  • User-474980206 posted

    you don't say which version of bootstrap you are using, but you don't specify the navbar-collapse class to define the collapse section. see the navbar docs. 

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 9, 2019 9:04 PM
  • User1535942433 posted

    Hi mariolopes,

    As far as I know, the data-toggle="collapse" is required and used to hide the element.  The data-target attribute is pointing to an id selector you should add the aria-controls attribute to the control element, containing the id of the collapsible element.

    Besides,I suggest you could use bootstrap sidebar to make it beautiful. 

    More details ,you could refer to below codes:

     <script src="Scripts/jquery-1.10.2.js"></script>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <script src="Scripts/jquery.pnotify.min.js"></script>
        <link href="Content/jquery.pnotify.css" rel="stylesheet" />
    
    
     <div class="container">
    
                    <div class="row">
                        <div class="col-md-4">
                            <img src="image/image5.jpg" class="img-fluid" />
                        </div>
    
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#navbarSupportedContent1"
                                    aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
                                Edifício escolhido <span class="badge badge-light">
                                    <span id="topo_lblEdificio">?</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 mt-2">
                            <nav class="navbar  bg-light">
                                <div class="collapse navbar-collapse" id="navbarSupportedContent1">
                                    <ul class="navbar-nav vertical-nav">
                                        <!-- Collapse button -->
                                        <li class="nav-item">
                                            <a class="nav-link" href="entrada.aspx"><i class="fas fa-address-card"></i>Home</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="novoedificio.aspx?edificios=1"><i class="fas fa-address-card"></i>Edifício</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="planocontas.aspx?planocontas=1"><i class="fas fa-address-card"></i>Plano de contas</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="novafracao.aspx?fracao=2"><i class="fas fa-address-card"></i>Frações</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="novoseguro.aspx"><i class="fas fa-address-card"></i>Seguros</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="novobanco.aspx?bancos=1"><i class="fas fa-address-card"></i>Bancos</a>
                                        </li>
                                        <li class="nav-item dropdown">
                                            <div class="btn-group dropright">
                                                <a class="nav-link dropdown-toggle" href="#" id="navbardrop66u" data-toggle="dropdown">Movimentos
                                                </a>
                                                <div class="dropdown-menu ">
                                                    <a class="dropdown-item" href="receita.aspx?receita=2">Receita</a>
                                                    <a class="dropdown-item" href="despesa.aspx?despesa=2">Despesa</a>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
    
                        <div class="col-md-9 mt-2">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="entrada.aspx">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"><a href="novoedificio.aspx?edificios=2">Adicionar</a> <a href="novoedificio.aspx?edificios=1">Visualizar</a> e Alterar  Edifícios</li>
                                </ol>
                            </nav>
    
    
                            <div id="todosedificios" class="card">
                                <div class="card-header bg-success">
                                    <h2>Todos edifícios:</h2>
                                </div>
                                <div class="card-body">
                                    <div>
                                        <table class="table table-bordered table-condensed" cellspacing="0" id="GridView1" style="border-collapse: collapse;">
                                            <tr>
                                                <th scope="col">id</th>
                                                <th scope="col">codigo</th>
                                                <th scope="col">morada</th>
                                                <th scope="col">&nbsp;</th>
                                            </tr>
                                            <tr title="Clique para selecionar" onmouseover="this.style.cursor=&#39;pointer&#39;;" onmouseout="this.style.textDecoration=&#39;none&#39;;" onclick="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Select$0&#39;)">
                                                <td>24</td>
                                                <td>edificio123</td>
                                                <td>Rua do Laborat&#243;rio Lote 1 Alto S&#227;o Jo&#227;o</td>
                                                <td>
                                                    <input type="image" name="GridView1$ctl02$ImageButton2" id="GridView1_ImageButton2_0" src="image/image5.jpg" />
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

    Link:

    Bootstrap hamburger: https://mdbootstrap.com/docs/jquery/navigation/hamburger-menu/


    bootstrap-sidebar:https://bootstrapious.com/p/bootstrap-sidebar

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 10, 2019 9:30 AM

All replies

  • User-474980206 posted

    you don't say which version of bootstrap you are using, but you don't specify the navbar-collapse class to define the collapse section. see the navbar docs. 

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 9, 2019 9:04 PM
  • User1535942433 posted

    Hi mariolopes,

    As far as I know, the data-toggle="collapse" is required and used to hide the element.  The data-target attribute is pointing to an id selector you should add the aria-controls attribute to the control element, containing the id of the collapsible element.

    Besides,I suggest you could use bootstrap sidebar to make it beautiful. 

    More details ,you could refer to below codes:

     <script src="Scripts/jquery-1.10.2.js"></script>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <script src="Scripts/jquery.pnotify.min.js"></script>
        <link href="Content/jquery.pnotify.css" rel="stylesheet" />
    
    
     <div class="container">
    
                    <div class="row">
                        <div class="col-md-4">
                            <img src="image/image5.jpg" class="img-fluid" />
                        </div>
    
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#navbarSupportedContent1"
                                    aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
                                Edifício escolhido <span class="badge badge-light">
                                    <span id="topo_lblEdificio">?</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 mt-2">
                            <nav class="navbar  bg-light">
                                <div class="collapse navbar-collapse" id="navbarSupportedContent1">
                                    <ul class="navbar-nav vertical-nav">
                                        <!-- Collapse button -->
                                        <li class="nav-item">
                                            <a class="nav-link" href="entrada.aspx"><i class="fas fa-address-card"></i>Home</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="novoedificio.aspx?edificios=1"><i class="fas fa-address-card"></i>Edifício</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="planocontas.aspx?planocontas=1"><i class="fas fa-address-card"></i>Plano de contas</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="novafracao.aspx?fracao=2"><i class="fas fa-address-card"></i>Frações</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="novoseguro.aspx"><i class="fas fa-address-card"></i>Seguros</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="novobanco.aspx?bancos=1"><i class="fas fa-address-card"></i>Bancos</a>
                                        </li>
                                        <li class="nav-item dropdown">
                                            <div class="btn-group dropright">
                                                <a class="nav-link dropdown-toggle" href="#" id="navbardrop66u" data-toggle="dropdown">Movimentos
                                                </a>
                                                <div class="dropdown-menu ">
                                                    <a class="dropdown-item" href="receita.aspx?receita=2">Receita</a>
                                                    <a class="dropdown-item" href="despesa.aspx?despesa=2">Despesa</a>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
    
                        <div class="col-md-9 mt-2">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="entrada.aspx">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"><a href="novoedificio.aspx?edificios=2">Adicionar</a> <a href="novoedificio.aspx?edificios=1">Visualizar</a> e Alterar  Edifícios</li>
                                </ol>
                            </nav>
    
    
                            <div id="todosedificios" class="card">
                                <div class="card-header bg-success">
                                    <h2>Todos edifícios:</h2>
                                </div>
                                <div class="card-body">
                                    <div>
                                        <table class="table table-bordered table-condensed" cellspacing="0" id="GridView1" style="border-collapse: collapse;">
                                            <tr>
                                                <th scope="col">id</th>
                                                <th scope="col">codigo</th>
                                                <th scope="col">morada</th>
                                                <th scope="col">&nbsp;</th>
                                            </tr>
                                            <tr title="Clique para selecionar" onmouseover="this.style.cursor=&#39;pointer&#39;;" onmouseout="this.style.textDecoration=&#39;none&#39;;" onclick="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Select$0&#39;)">
                                                <td>24</td>
                                                <td>edificio123</td>
                                                <td>Rua do Laborat&#243;rio Lote 1 Alto S&#227;o Jo&#227;o</td>
                                                <td>
                                                    <input type="image" name="GridView1$ctl02$ImageButton2" id="GridView1_ImageButton2_0" src="image/image5.jpg" />
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

    Link:

    Bootstrap hamburger: https://mdbootstrap.com/docs/jquery/navigation/hamburger-menu/


    bootstrap-sidebar:https://bootstrapious.com/p/bootstrap-sidebar

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 10, 2019 9:30 AM