Burger menu open below header

Wappler General Need Help
1

Hello,

Currently when my burger menu opens it moves to the left and the menu items within it open inside the header so the header just get’s taller and taller (especially with a dropdown menu within it - see image attached).

How can I make the burger menu open the navbar options in a separate menu just below / attached to the header so that it doesn’t affect the header size itself?

Thank you so much in advance!

Leo

Screenshot 2023-04-28 at 12.20.55
Screenshot 2023-04-28 at 12.20.55984×874 118 KB

2

There are a number of ways to achieve this depending on how you have contructed the navigation bar.

Please show us the code of a page containing the navigation bar, but with the removal of further content.

4

Hi Ben - thanks for your time!

Does this help?



 <div class="container justify-content-end space-between">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-lg-between align-items-lg-center align-content-lg-center flex-lg-nowrap flex-row" id="navbar1_collapse">
            <div class="navbar-nav align-content-lg-center flex-lg-nowrap justify-content-lg-between align-items-lg-center text-lg-center justify-content-xxl-center align-items-xxl-center w-100 align-content-between nav-fill">
              <div class="nav-item dropdown" id="choosesection"><a class="nav-link dropdown-toggle text-dark w-auto h-auto" href="#" id="navbar1_dropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Choose section&nbsp;</a>
                <div class="dropdown-menu" aria-labelledby="navbar1_dropdown">
                  <a class="dropdown-item" href="#whatisit">What is it?</a>
                  <a class="dropdown-item" href="#howdoesitworkrow">How does it work?</a>
                  <a class="dropdown-item" href="#costoffinancialadvice">How much does financial advice cost?</a>
                  <a class="dropdown-item" href="#whyofferthis">A message from our founder</a>
                  <a class="dropdown-item" href="#datapoweringreports">The data powering the reports</a>
                  <a class="dropdown-item" href="#" dmx-on:click="browser1.goto('#pricing')">Pricing and plans</a>
                </div>
              </div>
              <a class="nav-item nav-link text-dark bg-transparent" href="/register" internal="true" dmx-show="(conn_layout_whoami.data.identity < 1)" id="signmeup">Sign me up</a><a class="nav-item nav-link text-dark bg-transparent w-auto" href="/login" internal="true" dmx-show="(conn_layout_whoami.data.identity < 1)" id="login">Login</a>

              <a class="nav-item nav-link text-dark bg-transparent" href="/register" internal="true" dmx-show="(conn_layout_whoami.data.identity > 0)" dmx-on:click="run({'bootbox.confirm':{message:'Are you sure you would like to logout?',title:'Logout',buttons:{confirm:{label:'Logout'},cancel:{label:'Cancel'}},then:{steps:[{comment:{msg:'logout'}},{serverConnect:{url:'/api/registration/logout',site:'Training videos',name:'sc'}},{run:{action:`browser1.goto(\'/\')`}}]},name:'logout'}})" id="logout">Logout</a>
5

Try something like this:

<div class="container">
    <div class="row">
        <div class="col">
            <nav class="navbar navbar-light bg-light">
                <h1 class="h4 mt-md-auto mb-md-auto">My Company</h1>
                <a class="nav-link dropdown-toggle text-dark" href="#" id="navbar1_dropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Choose section&nbsp;</a>
                <div class="dropdown-menu" aria-labelledby="navbar1_dropdown">
                    <a class="dropdown-item" href="#whatisit">What is it?</a>
                    <a class="dropdown-item" href="#howdoesitworkrow">How does it work?</a>
                    <a class="dropdown-item" href="#costoffinancialadvice">How much does financial advice cost?</a>
                    <a class="dropdown-item" href="#whyofferthis">A message from our founder</a>
                    <a class="dropdown-item" href="#datapoweringreports">The data powering the reports</a>
                    <a class="dropdown-item" href="#" dmx-on:click="browser1.goto('#pricing')">Pricing and plans</a>
                </div>
                <div class="d-flex" dmx-show="(conn_layout_whoami.data.identity < 1)">
                    <a class="nav-item nav-link text-dark bg-transparent" href="/register" internal="true" id="signmeup">Sign me up</a>
                    <p>&nbsp;/&nbsp;</p>
                    <a class="nav-item nav-link text-dark bg-transparent w-auto" href="/login" internal="true" id="login">Login</a>
                </div>
                <a class="nav-item nav-link text-dark bg-transparent" href="/register" internal="true" dmx-on:click="run({'bootbox.confirm':{message:'Are you sure you would like to logout?',title:'Logout',buttons:{confirm:{label:'Logout'},cancel:{label:'Cancel'}},then:{steps:[{comment:{msg:'logout'}},{serverConnect:{url:'/api/registration/logout',site:'Training videos',name:'sc'}},{run:{action:`browser1.goto(\'/\')`}}]},name:'logout'}})" id="logout">Logout</a>
            </nav>
        </div>
    </div>
</div>
1 Like
6

Thanks so much Ben - with your code as a starting point and some fiddling around, I’ve managed to sort it!

Really appreciate your help.

2 Likes