How to collapse nav (I am NOT referring to navbar) automatically on mobile?

Currently when I add a nav (NOT navbar), and say add a bunch of menu / links to that it shows up without collapsing on mobile screens and it shows up the full nav with menu items.

But I want it to be collapsed into a hamburger menu on mobile screens. How would we go about doing this in bootstrap studio? Could you please post a step by step guide on how to achieve this? Thanks.

If you add a nav or nav bar from the Components in BSS, they do this automatically already, you don't have to set it up to do this. If you're adding an external menu then you'll need to be more specific on what menu you are using so people can be more helpful on it. I'm using the Yamm 3 Mega Menu, that was a hard one to setup, but it also did what it needed to do automatically so there wasn't much to setup for the hamburger menu to work. Have you tried it already or just asking ahead of time?

Thanks for the response. I am surprised that you are saying that "they do this automatically already. you don’t have to set it up to do this". But I don't find it to be the case. Please see my attached images (desktop and mobile views) for what I am talking about. i.e. I drag and drop a nav item to a blank page and add several nav links there. All the nav links show up in the "Desktop" view. But when I change the view to "Mobile", all the nav links continue to show up awkwardly in the mobile screen i.e. It doesn't get collapsed into a hamburger menu that one could click on. So it doesn't seem to be "automatic". You see what I mean?

Ah, looks like there isn't a way I could directly attach anything to this post :-(. But I did a work around and able to provide the screenshot links now. Let us see if that works!

Desktop view Mobile view

Seems like the image links didn't work. Here are the direct links to the screen shots:

Desktop view: http://prnt.sc/c7e6bw Mobile view: http://prnt.sc/c7e7cf

You could see how nav shows up in the mobile view with all the menu items awkwardly expanded and showing up. But all want to see in the mobile view is the "Hamburger menu" on which if we click it would expand and show up the menu items.

I am unable to see your screen shots so I'll give you this.

There are certain elements expected by the JavaScript and CSS by default for bootstrap to automatically handle the collapsing of the nav to/from a hamburger view.

So it's is not necessarily easily done without using the already designed navbar, because you will effectively be recreating it anyways. It basically requires using the collapse plugin which is already included in the BSS apps bootstrap.js. However, to get it to look like and act like the navbar is where all the CSS comes in.

Here is a basic navbar

<*nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <*button class="navbar-toggle collapsed" data-target="#navcol-2" data-toggle="collapse">
                <*span class="sr-only">Toggle navigation<*/span>
                <*span class="icon-bar"><*/span>
                <*span class="icon-bar"><*/span>
                <*span class="icon-bar"><*/span>
            <*/button>
        </div>
        <div id="navcol-2" class="collapse navbar-collapse">
            <*ul class="nav navbar-nav">
                <*li role="presentation">
                    <*a href="#">First Item<*/a>
                <*/li>
                <*li role="presentation">
                    <*a href="#">Second Item<*/a>
                <*/li>
                <*li role="presentation">
                    <*a href="#">Third Item<*/a>
                <*/li>
            <*/ul>
        </div>
    </div>
<*/nav>

Here is how I see it works.

Mostly the classes are there for styling, i.e. position/look and feel

When the site is large enough the menu is not displayed in hamburger view controlled by CSS

@media (min-width: 768px){
  .navbar-toggle {
    display: none;
  }
}

When the site is wider then 768px then the hamburger menu i.e. the button with class=navbar-toggle is hidden from view and the div with the class="navbar-collapse collapse" is set as display=block

@media (min-width: 768px){
  .navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
  }
}

So when the sites width is less then 768px wide then the 2 media queries effectively no longer apply to the nav causing the button to come into view and the parent div of the UL to be hidden.

This is where the collapse plugin comes into play, all it does is that when you click the hamburger button it triggers the toggling of the parent div of the UL to become visible/hidden.

The parts of the HTML that are the data-/ID and the collapse classes are what the collapse plugin uses to know what to collapse/recollapse when you click the hamburger menu.

Now, literally you can take the HTML I posted and paste in as custom code then change all the places where the code says navbar and change it to nav-bar, you will lose nearly all the styling but keep the base functionality.

Just add the media query spots to get the hamburgering of the menu. @media (min-width: 768px){ .nav-bar-toggle { display: none; } } @media (min-width: 768px){ .nav-bar-collapse.collapse { display: block!important; height: auto!important; padding-bottom: 0; overflow: visible!important; } }

To do that in the app here is how you do it.

Drag and drop the custom code component to your project. In the Layout View double click on the wording Custom Code, should open up the Custom Code tab section towards the bottom middle right of the app.

Clear out the custom code section then copy and paste my HTML code above into the custom code section. Remove all the *s, they are there so the forum doesn't break the code. Change all the navbar references to nav-bar.

Then in the HTML tab in the HTML pane on the middle left of app drill through and select the div with the class="nav-bar-toggle".

In the Design pane on the bottom right of the app click on Styles to expand and double click on your custom stylesheet. This will open it into the same area the custom code component is but with your custom stylesheet in view.

Click in the stylesheet where a thin blue line appears to create a new CSS rule. This will pre-populate the CSS rule, I'd say change it to just being .nav-bar-toggle then hit your TAB key type in display hit TAB key type in none. To the right side of the CSS rule click on the three vertical dots and select "Add Media Query" change the media rule to min-width: 768px

Click the 3 dots again and select duplicate.

  1. Change the class rule to .nav-bar-collapse.collapse.
  2. Change property display:none to display:block !important.
  3. Add property height: auto !important;
  4. Add property padding-bottom: 0;
  5. Add property overflow: visible !important;

Now, you have an unstyled hamburger menu. You will need to add all the styling you want for how you want your menu to look.

Just so you know I actually did try this process out to figure out how it was working.

Saj

Thanks for the very detailed response. Appreciate that very much. I am yet to grasp all the details. I shall try your suggestions and post back on how it works.