Unable to expand collapsed navbar in Bluemix deployed app

Question

I am deploying a very simple node.js application in bluemix. I am using ejs and bootstrap to create a navbar at the top. It works on my local version of the code, but when I push it to bluemix and deploy, the navbar doesn't expand. Interestingly the source code for both apps as seen by the browser is exactly the same. Here is the code:

<!-- views/pages/start.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
<!-- views/partials/head.ejs -->

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Some Title</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
    body    { position: relative; padding-top:50px; }
</style>

</head>

<body class="container" data-spy="scroll" data-target=".navbar" data-offset="50">

<header>
<!-- views//partials/header.ejs -->


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Website</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
</header>

score 0 · Accepted Answer · edited May 23 '17 at 11:51

When you load your app in Bluemix, does your browser show a "shield" icon in the address bar? If so, you might be running into mixed content blocking. This basically means the browser refuses to run external content served over HTTP when the rest of the website is served over HTTPS.

The easiest way to fix it is by changing your external resources to all https:// URLs:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

For security, you should always load your Bluemix app using its https:// URL as well.

Thank you! That fixed the problem. – Carlos Mendoza Aug 05 '16 at 08:45 — Carlos Mendoza, Aug 05 '16 at 08:45

Unable to expand collapsed navbar in Bluemix deployed app

1 Answers1