Can someone please explain to me why the menu for this url works: http://savethecute.businesscatalyst.com/pictures and this one doesn't http://savethecute.businesscatalyst.com/pictures/ I have compared the source code and they are identical. A solution would be even better, but I don't even know where to start since I don't understand why there is a difference.
I am using the latest version of bootstrap inside business catalyst and am still very early in the design process.
Any clarification is greatly appreciated. Thank you.
The Bootstrap style and script links that you've added use relative url's, they don't start with for example a http://
. This makes your browser use the current url as a starting point when looking for the resource.
For example in the head
you use
<link href="_assets/css/bootstrap.min.css" rel="stylesheet" />
to refer to Bootstrap's css. For the url without the slash, http://savethecute.businesscatalyst.com/pictures, this becomes:
<link href="http://savethecute.businesscatalyst.com/_assets/css/bootstrap.min.css" rel="stylesheet" />
which can be found by the browser. However the url including the slash becomes:
<link href="http://savethecute.businesscatalyst.com/pictures/_assets/css/bootstrap.min.css" rel="stylesheet" />
and at that location you don't serve Bootstrap's css.
I think you have three options to solve this:
Add a base
tag to the head
of your html. This makes every relative url become relative to the base url. In your case add <base href="http://savethecute.businesscatalyst.com/">
Serve Bootstrap from a CDN (as you already do for Font Awesome). See http://www.bootstrapcdn.com for instructions