Forums

Problem with the nav bar with bootstrap

Permalink 1 user found helpful
Hey guys, finishing up my site here. The one issue I'm having is having the navigation load normal.
The original code is:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo.png" alt="logo">
Ambrosia
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="active"><a href="about.html">About</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>

My modified code is:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo.png" alt="logo">
Ambrosia
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<?php
$a = new GlobalArea('Header Nav');
$a->display();
?>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>

If anyone knows where I am going wrong that would be very helpful!

Thanks!
 
apc123 replied on at Permalink Reply
apc123
Hi,

It would help to see it in action because I don't know what:

<?php 
$a = new GlobalArea('Header Nav');
$a->display();
?>
outputs for you.

Also, in your example you close out an li and ul that aren't opened.

Cheers,
Anthony
DrTrills replied on at Permalink Reply
Thanks! Fixed the <ul> and <li> tag.

Here is my nav output with the fixed <ul> <li>

http://pastebin.com/fByDf6UA
apc123 replied on at Permalink Reply
apc123
You open to UL's back to back.

<ul class="nav navbar-nav">
                                                <ul class="nav">


I think the first UL is unnecessary.
DrTrills replied on at Permalink Best Answer Reply
I want to say thanks for your help, good eye on the double UL tag. I found the problem and the solution, so hopefully others can learn from this. Basically C5 the atonal was spitting out <ul class="nav"> which was being generated in concrete/blocks/autonav/view.php. To fix this, I just copied the view.php form that folder to blocks/autonav/view.php and removed the <UL> tag. Very frustrating, but now I feel like I understand C5 better.

Cheers!