So I started a self-teaching project to get myself up to speed on JQuery, PHP and to improve my understanding of CSS and to give me a framework to start with I download a Bootstrap e-commerce theme to which I've been applying my various PHP and JQuery code snippets.
I'm just now trying to implement nav-tabs on one of the pages but I realise that this function is broken in the bootstrap.css file supplied with the theme. If I swap out this bootstrap for the 'normal' one then the nav-tabs work but lots of other visual elements get corrupted or broken. So I have two choices - either rewrite the 'normal' bootstrap to try implement these visual changes or try fix the nav-tabs in the modified file. My preference is for the latter.
The 'normal' CSS is this one:
The modified one can be accessed here:
This basic code snippet works OK with the normal but in the modified one the tabs don't display at all. I tested with nav-pills also but no luck.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
I've tried just copying and pasting the entire .nav-tabs section from the standard to the modified CSS but that did not work. CSS is a real weak point for me so I've kind of hit the wall here.
I put a sample fiddle with the two CSS files (comment out the one not used) here: