Navbar doest not collapse

Bootstrap Studio Help
1

Is the navbar in bootstrap collapse in mobile devices by default? i need to use custom code for this? i aquire my license today, still learning.

2
  • in boostrap studio
3

Yes the navbar automatically collapses for mobile devices. I'm glad I didn't have to figure that out myself as well :)

If you are using the Chrome browser to check the Preview of your project, you can right click in Chrome on the previewed page and select Inspect or use F12.

In Chrome's Developer Tool window click on the icon to the left of the Elements tab and this will toggle device mode ON and this will allow you to switch between device sizes easily by clicking on the segmented bar. It's what I use to test my preview.

Firefox and IE also have a Developer Tool accessed the same way but accessing the device mode is different for each.

Saj

4

Thank you. See in this link on google drive and then you i'll undersant my problem: https://drive.google.com/drive/u/0/folders/0BySuIv88AaV5WXNsanhSVXpDYlE

  • 's are not breaking a the end. so my question is: i need to use a custom html for this or boostrap studio should make it work ?

    • 5

    this post run html, i'm LI are not breaking a the end. so my question is: i need to use a custom html for this or boostrap studio should make it work ?

    6

    ACK you broke the forum somehow... I can't access the google drive site as I don't have a google account for anything so I can't see your example.

    Your navs base HTML should look similar to the following, all the classes and IDs are necessary for Bootstrap and the app to recognize the NAV and function appropriately.

    <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            < a class="navbar-brand navbar-link" href="#">Brand< /a>
            < button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
                <span>Toggle navigation</span>
                <span></span>
                <span></span>
                <span></span>
            < /button>
        </div>
        <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="nav navbar-nav">
                <li class="active" 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>

    If it is not something like the above, then you probably will need to do something custom then.

    Saj

    7

    Thank's Saj, look like i'm doing the right thing. so i'll use a custom code. thanks!