Bootstrap Navbar Drop down only appearing properly on home page

HTML & CSS
1

Hi,

I’m working on a getting my own custom cms to show all top level pages and sub pages into a bootstrap navbar.

My test site currently has a home page and an about us page with two child pages and there is an additional test page which has no children.

On the home page, everything is working as I’d expect. If you click on the about us page the two child pages can be selected. However, if I’m on the test page, the child pages don’t appear as drop downs when clicking on the about us link.

As far as I can see, the output code for the nav bar on all pages is the same:

HTML on test page:


<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="http://www.mysite.com">Home</a></li>
<li class="dropdown"><a href="http://www.mysite.com/About-Us" class="dropdown-toggle" data-toggle="dropdown">About Us</a>
<ul class="dropdown-menu">
<li><a href="http://www.mysite.com/About-Us/About-Page-1">About Page 1</a></li>
<li><a href="http://www.mysite.com/About-Us/About-Page-2/">About Page 2</a></li>
</ul>
</li>
<li class="active"><a href="http://www.mysite.com/Test-Page">Test Page</a></li>
</ul>
</div>

HTML on home page:


<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.mysite.com">Home</a></li>
<li class="dropdown"><a href="http://www.mysite.com/About-Us" class="dropdown-toggle" data-toggle="dropdown">About Us</a>
<ul class="dropdown-menu">
<li><a href="http://www.mysite.com/About-Us/About-Page-1">About Page 1</a></li>
<li><a href="http://www.mysite.com/About-Us/About-Page-2/">About Page 2</a></li>
</ul>
</li>
<li><a href="http://www.mysite.com/Test-Page">Test Page</a></li></ul>
</div>

If anyone has any ideas or knowledge on why this might be happening, that would be hugely appreciated.

2

You really need to post a link in a case like this.

3

Hi Ralph,

Unfortunately the test site isn’t accessible via link at the moment. I’m seeing it via a change to the hosts file. I’ll see if I can copy over to somewhere I can link to.

4

I assume the JS is in both pages?

5

I think I can safely qualify for today’s dunce award! I’d checked that all the head section scripts were set to absolute paths but missed the fact that the other scripts that loaded after close of body and html were set to relative paths. Have changed and all is working great now.

Thanks for your time. Moral of the story - don’t spend a day forensically checking the bit of the code where you think you have a problem, without considering other possibilities.

6

lol - it’s easily done :slight_smile:

7