Search code examples
twitter-bootstrapmenutwitter-bootstrap-3navbusiness-catalyst

Bootstrap / Business Catalyst Broken menu


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.


Solution

  • 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:

    1. Make the url including the slash redirect to the one without the slash
    2. 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/">

    3. Serve Bootstrap from a CDN (as you already do for Font Awesome). See http://www.bootstrapcdn.com for instructions