How to create a hamburger sidebar menu attached to top menu

mldardy · October 1, 2022, 12:28am

I need help attached a sidebar menu on to the the top menu. I have attached a image of what it looks like with the sidebar menu detached from the top menu. I want to move it up to the top menu as a hamburger menu. I shortened the side menu html because there is too many menu items so they won’t much the image you see.

html

<body class="loggedin">
<div class="site-wrapper">
    <!-- HEADER -->
    <header id="header">            
        <nav class="navbar navbar-expand-lg mb-2">
            <a href='/' class="navbar-brand">
                <img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
            </a>
            <div class="vl"></div>

            <div class="nav-container">

   <ul class="nav-items">
    <!-- Navigation -->
   
    <!-- Dropdown menu -->
    <li class="nav-item-select nav-item-dropdown">
      <a class="dropdown-trigger" href="#">Select SFA</a>
      <ul class="dropdown-menu">
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 1</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 2</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
 <div class="vl"></div>
            <div class="nav-container">

   <ul class="nav-items">
    <!-- Navigation -->
   
    <!-- Dropdown menu -->
    <li class="nav-item-select nav-item-dropdown">
      <a class="dropdown-trigger" href="#">Select Program Year</a>
      <ul class="dropdown-menu">
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 1</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 2</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
                   
           
            <div class="navbar-collapse collapse" id="Div1">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item">
                        <a href="#" class="nav-link" title="Settings"><i class="fas fa-search"></i></a>
                    </li>
                    
                    <li class="nav-item rounded-icon">
                        <a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b class="caret"></b></a>
                    </li>
                </ul>
            </div>
        </nav>           
        <div id="appSideBar" class="hidden">
            <div class="appSideLinks">
                <nav aria-label="programs">
                    <ul class="programsSide">
                        <li class="program-item">
                            <i class="fas fa-apple-alt"></i> School Nutrition Programs
                        </li>
                        <li class="program-item">
                            <i class="fas fa-dollar-sign"></i> Accounting
                        </li>
                        <li class="program-item">
                            <i class="fas fa-child"></i> Child and Adult Care Food Program
                        </li>
                        <li class="program-item">
                            <i class="fas fa-cogs"></i> Maintenance and Configuration
                        </li>
                        <li class="program-item">
                            <i class="fas fa-temperature-hot"></i> Summer Food Service Program
                        </li>
                        <li class="program-item">
                            <i class="fas fa-shield-check"></i> Security
                        </li>
                        <li class="program-item">
                            <i class="fas fa-truck"></i> Food Distribution Program
                        </li>
                    </ul>
                </nav>
            </div>
        </div>


    </header>
    <!-- SPONSOR INFO SECTION -->

    <main role="main" id="main">
        <div id="wrapper">
            <!-- SIDEBAR -->
            <div id="sidebar-wrapper" class="sb-wrapper">
                <a href="#menu-toggle" class="sidebtn-holder" id="menu-toggle">
                    <i class="fas fa-chevron-circle-left"></i>
                </a>
                <div class="list-wrapper">
                    <div class="nav-wrapper">          
      <ul class="sidebar-nav">
      <li>
          <a href="#" v-b-tooltip.hover.right title="Entity Manager">                
            <div> Entity Manager</div>
          </a>
        </li>
        <li>
          <a href="/#/AZSiteApps" v-b-tooltip.hover.right title="Area Eligibility">
            <div> Area Eligibility 
            </div>
          </a>
        </li>
        <li>
          <a href="/#/AZFFVP" v-b-tooltip.hover.right title="Site Applications">              
            <div> Site Applications</div>
          </a>
        </li>            
        <li>
          <a href="/#/AZProviderList" v-b-tooltip.hover.right title="Provider & Vendor List">
            <div> Providers &amp; Vendors</div>
          </a>
        </li>           
        <li>
          <a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Provisions">
            <div> Provisions</div><span class="material-icons">chevron_right</span>
          </a>
          <ul>
        <li><a href="#">Stream 1</a></li>
        <li><a href="#">Stream 2</a></li>
        </ul>
        </li>           
        </ul>
      </div>
       <div class="nav-wrapper">
      
      </div>
                </div>


            </div>

            <!-- CONTENT -->
            <div class="container-fluid">
                <div class="row">
                    <div class="col">
                        <div id="midcol-nslp" class="p-3">
                ]]>.Value

        Dim sContentBottomHtml As String = _
         <![CDATA[
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>

    </main>
  </body>
 </html>

Here is the image of what the page looks like currently

I definitely would appreciate any suggestions and help on this please.

PaulOB · October 1, 2022, 12:22pm

There’s not really enough information to provide real help as that looks like it’s one of the bootstrap version layouts.

If it is bootstrap then there are various built in options that you should be using (depending on version).

e.g.

At the very least we’d need to know what bootstrap version you are using and what custom css you have in place. Ideally a link to the page in question would be best.

mldardy · October 1, 2022, 6:12pm

Hi Paul,

I’m running version 3.3.7 of Bootstrap. Would it help to include the CSS for this?

PaulOB · October 1, 2022, 9:54pm

We’d need your custom css assuming you have not altered the bootstrap files?

It would be better if we could see the actual page though or failing that perhaps a reduced codepen could be constructed so we have something solid to work with.

mldardy · October 2, 2022, 8:13am

I put the custom css and html/bootstrap in a codepen. It doesn’t look perfect, like the image no showing but you can kind of get the idea.

As I stated, need help attaching a sidebar menu on to the the top menu as a hamburger menu. Hamburger menu should go on the top menu to the left of the image. Also need help on how to create submenus in the sidebar nav. For example, the Provisions menu item should have submenu items of Stream 1 and 2 as you can see in the snippet. The snippet doesn’t show the logo but you can see where the logo is placed on the top menu.

PaulOB · October 2, 2022, 12:03pm

Then why have you included version 4.1 in your css?

https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

If its 4.1 then it needs different css styles to bootstrap3 and indeed other bootstrap4 or 5 versions. It will also need the js that goes with the relevant version also otherwise none of the nav toggle(r) effects will work.

You really should be building this with the bootstrap controls otherwise its a bit pointless to use the framework at all.

The navbar toggle is a built in component but differs between versions. I believe 4,1 uses navbar-toggler rather than navbar-toggle. You would insert the relevant html and point it to the element you want to toggle via the data attribute pointing to its id.

I’ve added it your demo as an example to show how it works but obviously not styled yet. (If you had the correct styles then the hamburger should show correctly by default.)

I’ve just colored it red so you can see it but obviously with the correct css and js the icon would show.

  <nav class="navbar navbar-expand-lg mb-2">
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls=sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

and then:

 <div id="sidebar-wrapper" class="sb-wrapper collapse">
                                                                 <!--    <a href="#menu-toggle" class="sidebtn-holder" id="menu-toggle">
            <i class="fas fa-chevron-circle-left"></i>
          </a>-->
          <div class="list-wrapper">

CSS:

/* extra css */

.navbar-toggler {
  display: block!important;
  background:red;
  margin-right:5px;
}
.navbar-toggler[aria-expanded="true"]{
  position:fixed;
  top:20px;
  left:20px;
  z-index:1032;
}
#sidebar-wrapper{
  position:fixed;
  top:0px;
  bottom:0px;
  left:0;
  z-index:1031;
  padding-top:60px;
}

All the rest was done via the html using the bootstrap methods to toggle elements. If you read the documentation you can find simplified examples of this so I am not going to try and rewrite bootstrap for you as this is something you need to learn on your own.

The same applies for your drop down menu in the sidemenu as that can all be controlled from within bootstrap using data attributes and appropriate html.

I can’t really go into any more depth as it is unclear which real version of bootstrap you are using and what js files you are including also. I assume that you are using all the correct files for the version you are choosing?

Hope it helps you get started anyway.

mldardy · October 3, 2022, 9:53pm

Hi Paul,

I got this to mostly work. Had to put in some updated scripts as you mentioned to get the navbar-toggler to work. There are a couple of more things that I need help with

Do you know how to create a sub menu of an item on the side bar menu. For example, on the code pen there is a menu item named Provisions I want to create a sub menu with a caret on it so when you click on it looks like this:

Provisions >
Stream 1
Stream 2
Mutliple subs of the main menu item. Hopefully that makes sense.

Also when I click on the hamburger icon it moves the logo over top of the hamburger icon. Here is what it looks like before I click icon and after. Seems like the side menu is underneath the top bar menu with the logo and needs to be on top of it when clicked on?? Weirdly this doesn’t show on codepen.

Here is the latest codepen

I very much appreciate all of your help. Thanks

PaulOB · October 4, 2022, 10:18am

Bootstrap already has a system for that. You can find be the exact details here.

Just follow the instructions and add the correct classes and data attributes. I’m on a mobile at the moment so it’s too awkward to offer code.

That sounds like a z-index issue so try increasing the value for the sidebar. It would be hard for me to debug without seeing the problem directly:)

PaulOB · October 4, 2022, 12:44pm

Ok back on a computer and here’s the basic code.

<li>
                  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" v-b-tooltip.hover.right title="Provisions">
                    <div> Provisions<span class="material-icons">chevron_right</span></div>
                  </a>

                  <ul class="collapse" id="collapseExample">
                    <li><a href="#">Stream 1</a></li>
                    <li><a href="#">Stream 2</a></li>
                  </ul>
                </li>

It’s up to you to style as you wish but you will get the open and close etc.

mldardy · October 11, 2022, 7:13pm

Thanks for your help on this. I’ve got another question that I will post in a separate thread. It’s a lot less complicated to this thread but related to it.

system · January 11, 2023, 2:14am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Fixed static sidebar and menu help (bootstrap) HTML & CSS bootstrap	3	2601	December 18, 2021
How to put a background to the drop down hamburger menu HTML & CSS	1	1244	August 4, 2018
Placing a logo on a sidebar navigation HTML & CSS	4	724	March 11, 2024
Adding an hamburger toggle to my website HTML & CSS	68	8663	October 3, 2022
Converting existing menu to hamburger for mobile HTML & CSS	6	643	April 20, 2021

How to create a hamburger sidebar menu attached to top menu

Related topics