WebFaction
Community site: login faq

I am using Bootstrap 4 to collapse a menu down to an icon for small screen sizes that will reveal the menu when clicked. Here is the relevant html:

<nav class="navbar navbar-light navbar-expand-md">
    <button class="navbar-toggler ml-auto px-0" type="button"
            data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon pt-1" style="background:none">
            <i class="fas fa-bars"></i>
        </span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto text-right">
            <li class="nav-item">
                <a href="#" class="nav-link">Reports</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link pr-0">Help</a>
            </li>
        </ul>
    </div>
</nav>

On my local machine it works as it is supposed to work. For small screen sizes there is a triple-bar item from FontAwesome that, when clicked, reveals the menu. When I try it online, however, the triple-bar icon does not respond to my clicks.

I've been experimenting and, as near as this beginner can tell, the Java Script behind the operation of Bootstrap's navbar-toggler doesn't seem to be working when I try it on my Webfaction site but it does work on my local machine. Using "Inspect Element" on my local machine I can see "show" appearing in the navbar-collapse div instead of "collapse". This is done by JavaScript. On my webfaction version of the website, however, nothing happens to change the "collapse" to "show" when I click the icon. Also, I have another JavaScript script, elsewhere on the page, that doesn't function online but does function locally. All this leads me to believe JavaScript isn't working on my website. Why not?

I'm probably missing something simple here. Is there something I need to do to get JavaScript to work on a Webfaction site, or does the problem lie elsewhere?

asked 23 Nov, 16:51

jmorris
114
accept rate: 0%

edited 23 Nov, 17:01

Hi @jmorris, do you have a link to look at? There could be many reasons that a JS script errors out, and therefore would stop working, but this shouldn't have anything to do with where you are hosting it as javascript (at least in this context) runs completely in the browser. One potential issue that comes to mind might be the URLs you're using to reference the files. Are you linking to the files via relative or absolute URLs? Is the domain name hardcoded in the links? eg. /scripts/main.js vs ./scripts/main.js vs http://mysite.com/scripts/main.js. The browsers devtools should help signal what's causing the problem fairly quickly. If you have a link to share I don't mind taking a quick look. :)

(23 Nov, 17:19) smacd

Well, I think I discovered the problem after looking at some entries in the "Related questions" sidebar. (The response from smacd, which arrived as I was originally writing this, would have helped too.) Looking into my browser's Webdeveloper Console I noticed it was complaining about loading static content from a non-secure site. I had the line:

 <script
    src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

which references an http source when I needed to have:

 <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

I must have inadvertently edited that line at some point since I originally copy/pasted it from the GetBootstrap website where it is correct.

Mystery solved!

permanent link

answered 23 Nov, 17:26

jmorris
114
accept rate: 0%

edited 23 Nov, 17:29

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×13
×3

question asked: 23 Nov, 16:51

question was seen: 51 times

last updated: 23 Nov, 17:29

WEBFACTION
REACH US
SUPPORT
AFFILIATE PROGRAM
LEGAL
© COPYRIGHT 2003-2016 SWARMA LIMITED - WEBFACTION IS A SERVICE OF SWARMA LIMITED
REGISTERED IN ENGLAND AND WALES 5729350 - VAT REGISTRATION NUMBER 877397162
5TH FLOOR, THE OLD VINYL FACTORY, HAYES, UB3 1HA, UNITED KINGDOM