I have a .css stylesheet to configure my Bootstrap navbar but Meteor loads the merged css files before the Bootstrap css file gets loaded which overwrites my changes.I’ve tried adding an explicit link to my css file after the Bootstrap link, but it makes no difference
From “show source”:
<html>
<head>
<script type="text/javascript" src="http://ff.kis.v2.scr.kaspersky-labs.com/A5E18DC7-F07A-D341-AC91-193B05BF8BA6/main.js" charset="UTF-8"></script>
<script id='meteor-headers' type='application/ejson'>{"token":1501658235420.72,"proxyCount":1,"headers":{"x-forwarded-proto":"http","x-forwarded-port":"3000","x-forwarded-for":"127.0.0.1","cache-control":"max-age=0","upgrade-insecure-requests":"1","connection":"keep-alive","dnt":"1","referer":"http://localhost:3000/homepage","accept-encoding":"gzip, deflate","accept-language":"en-US,en;q=0.5","accept":"text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8","host":"localhost:3000","x-ip-chain":"127.0.0.1,127.0.0.1"}}</script>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=ad85f01850244631cc8857f94f08e233b1ef5e38">
<link href='https://fonts.googleapis.com/css?family=Jolly+Lodger|Roboto:400,400italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="client/navbar.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.6/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
Eliminating the Bootstrap css link allows my navbar changes to work but it makes the rest of the page look like crap. I suppose I could chain another class to the HTML and css (myNav) but it is ugly and a chunk of work.
Suggestions for what I’m doing wrong or how to fix it? TIA.