Navbar Hamburger Button Not Expending On Small Screen

Bootstrap Studio Help
1

Hello I Had An Issue Which Is Navbar Hamburger Button Not Expending On Small Screen My Code Looks Like

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CleanCut</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400|Roboto:300,400,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400|Roboto:300,400,700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="/nav-sticky-top.css">
    <link rel="stylesheet" href="/Navigation-with-Search1.css">
    <link rel="stylesheet" href="/styles.css">
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header"><a 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>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script id="bs-live-reload" data-sseport="46448" data-lastchange="1486233263511" src="/js/livereload.js"></script>
</body>

</html>
3

How did you do this code??? That's not from BTS, I think...

And if your Java-Code does not work... then maybe the script cannot be executed.

4

yes it is BTS JUST IMPORTED SOME CDN

5

what did you do with the path??

<script src="/js/jquery-3.1.1.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script>

normally is:

<script src="assets/js/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script>

So I think your paths went wrong...

6

what CDN did you import??

I can do what I want... my paths are always the same :)

write step-by-step what you did.

7

but that is opening correct file ?

8

now removed cdn i just dragged navbar component from BTS and tried in mobile breakpoint Hamberger menu came but not clicking

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CleanCut</title>
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,700">
        <link rel="stylesheet" href="/styles.css">
    </head>

    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header"><a 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>
        <script src="/js/jquery-3.1.1.min.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
        <script id="bs-live-reload" data-sseport="46448" data-lastchange="1486234016363" src="/js/livereload.js"></script>
    </body>

    </html>
9

Publish the Site and paste the link here, so I can see what your site is doing.

And for search... make a new Design

add an NavBar

nothing more

and try the function...

if it's still not working... hmm... then we have to see.

but if this works... then add first CDN after the other, and give it each a try.

Then you see what going wrong.

CDN are external things!! So first make the internal working.

And once more... write STEP-BY-STEP what you did... So I can recreate that error

10

worked when I published it http://long-credit-0161.bss.design/ I was worried as it didn't work on BTS

11

Ah.. now I see how your paths are made...

you pasted the Sourcecode of the Live-Preview... I thought you pasted the "Export"

that is the reason for the different paths.

But I still can not recreate your problem. which version of BTS do you use? Mine is 2.5.2 - Linuxmint18

your code was <div class="navbar-header"><a href="#">Brand</a>

my code is <div class="navbar-header"><a href="#">Brand</a>

and the same in the next line:

Did you create an new File to retry the error?? your code:

<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span>Toggle navigation</span><span></span><span></span><span></span></button>

my version: <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"> <span>Toggle navigation</span><span></span><span></span><span></span></button>

Maybe there is somewhere a little bug...

12

BTS Studio 2.5.2 Standard Edition

13

Are you trying to click the Hamburger menu from with in the BSS app? If so, it doesn't work that way, you have to use the preview for testing things like that.

Saj

14

yes i realised that now thank you