Bootstrap dropdown menu broken for pages in folder while working for pages in root. Both groups php_include the same external header file

Question

I run some of the web stuff at work on the side, not exceptionally experienced at this stuff. I don't know what element of the process I've gone through has caused the hiccup so if you bear with me, I'll try and explain in-depth.

Recently our site (basic bootstrap template) has begun expand out from just a few pages, and to stay on top of things I opted to pull the header and footer files out into their own includes folder, and use...

<!--Header include-->
<?php $path = $_SERVER['DOCUMENT_ROOT'] . "/includes/"; include ( $path . 'header.html' ); ?>

...for easier management. Went through the site and stripped out old code and changed page extensions to php (and now began testing site on MAMP).The structure of the site is 75% of pages living in root, 25% living in a folder called services. All pages pull the same header.html So far so good.

The problem arrises when I test the site. All pages that live in root (public_html) work as expected, the nav drop down menu contained in the header works fine. But when you click into any of the pages that live in /services/ the dropdown (and only the dropdown), breaks. By breaks, I mean that a dropdown should appear on mouse hover over and it doesn't. All of the other CSS, the theme, the code for a picture slider, works ok. It's just this one element of the nav bar that breaks for these pages that live in the /services/ folder.

I compared the elements of a working page and a broken page by inspecting them firefox, and this is the only place I can see any differences..

On a working page, the working dropdown html shows as...

ul class="dropdown-menu bold" style="display:none;"

With CSS rules of...

element {
    display: none;
}
.navbar .nav li .dropdown-menu {
    z-index: 1000;
}
header ul.nav li ul {
    z-index: 1000;
    margin-top: 20px;
}
.bold {
    font-weight: 900;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background: none repeat scroll 0% 0% #343434;
    box-shadow: none;
    border-right: 2px solid #302F2F;
    border-width: medium 2px 2px;
    border-style: none solid solid;
    border-color: -moz-use-text-color #302F2F #302F2F;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}
.dropdown-menu {
    border-radius: 0px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
li {
    line-height: 1.6em;
}
li {
    line-height: 20px;
}
.nav {
    list-style: outside none none;
}
body {
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6em;
    color: #656565;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}
html {
    font-size: 100%;
}

The broken page(s) shows html of...

<ul class="dropdown-menu"></ul> <<< I think this might be a red flag??

and CSS of....

element {
}
.navbar .nav li .dropdown-menu {
    z-index: 1000;
}
header ul.nav li ul {
    z-index: 1000;
    margin-top: 20px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background: none repeat scroll 0% 0% #343434;
    box-shadow: none;
    border-right: 2px solid #302F2F;
    border-width: medium 2px 2px;
    border-style: none solid solid;
    border-color: -moz-use-text-color #302F2F #302F2F;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}
.dropdown-menu {
    border-radius: 0px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
li {
    line-height: 1.6em;
}
li {
    line-height: 20px;
}
.nav {
    list-style: outside none none;
}
body {
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6em;
    color: #656565;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}
html {
    font-size: 100%;
}

(I can manually change the broken dropdown in firefox inspect to element { display:inline } and the dropdown reappears, with working links to the other pages.)

Overall, I can't understand why this is happening.

• All of the other CSS is working on the broken pages, so the links to that location must work.
• All pages share the same header.html which uses the same html to create the working dropdowns.
• All CSS is called individually at the start of each page in the head (not in the header.html file).
• If all pages look at the same header file, and they all point to the same CSS, how am I getting different results?

Thanks,

Answer 1

Found the answer to this a while ago and I figured I'd update. The javascript that animates the nav bar was written out and contained in the footer with relative links to the js folder, which hadn't been updated when the pages were moved into the services folder. So the animations would fail because the javascript files couldn't be located.

Fixed this by making the footer as its own file in an includes folder with explicit links to the js folder from there, then used a php document root include (same as the code above) to bring it into the other pages.