Dobob Dobob - 2 months ago 62
CSS Question

Local Bootstrap nav-tab works, but not remotely from github pages

I am getting a weird bug where if I drag and drop my index.html into Firefox or chrome, the bootstrap nav-tab works and the tabs transition the tab-content when I click between the "Art" and "Resume" tab. But if I push my web page to Github pages and visit the page through Github and then click the other "Art" tab, it won't work. The link will change to "#Art" but the tab-content won't transition.

The Github page.

As you can see the tab doesn't switch.

The code is below:

<!DOCTYPE html>

<link rel="stylesheet" href="">
<link rel="stylesheet" href="style/w3.css">
<link rel="stylesheet" href="style/darkly.css">
<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="style/socialbuttons.css">
<script src=""></script>
<script src=""></script>

<ul class="nav nav-tabs">
<li id="resume-tab" class="active"><a data-toggle="tab" href="#Resume">Resume</a></li>
<li id="art-tab"><a data-toggle="tab" href="#Art">Art</a></li>

<div class="tab-content main-body">

<div id="Resume" class="tab-pane fade in active">
<div class="texts container">
<p>resume tab</p>
</div> <!--close container-->
</div><!--close Resume-->

<div id="Art" class="tab-pane fade images">
<div class="container">
<p>art tab</p>
</div><!--close container-->
</div> <!--close images -->
</div> <!--close tab-content main-body -->


If you save the .html file and drag it into a browser, the tab switching works, but if I host it on Github pages, the tab switching breaks.

I followed the turtorial on w3 school:

Mixed Content: The page at '' was loaded over 
HTTPS, but requested an insecure script 
''. This 
request has been blocked; the content must be served over HTTPS.

It helps to open the console sometimes, you need to use:

So you have to find that <script> tag where you import bootstrap.js and correct the url to https