You should be able to update the autonav template and put your bootstrap classes in there. Are you using a purchased theme from the marketplace or are you making your own from scratch? If you're just using the normal autonav (without a custom template) you can create a custom template and add your markup in there.

To create a custom template copy the view.php from /concrete/blocks/autonav to /application/blocks/autonav and name it something like custom_nav.php (this will be Custom Nav) in the custom template dropdown. Then adjust the markup as needed and set that custom template on your Header Nav.

On a second note, I would strongly suggest using Global Areas for the Logo and Header Nav so you don't have to add/edit those on every page individually.

Hi,

I am building my own template from scratch. Unfortunately I have no idea where I should put my bootstrap classes, because I don't really understand php.

But at least I know it is possible. Thanks :)

For example, this is how to make a collapsible navbar with bootstrap 3:

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>

This is my code:

<div id="menu" class="row">
<div class="navbar-header col-md-4 col-lg-6 pull-left">
<?php
$a = new area('logo');
$a->display($c);
?>
</div>
<div class="navigation-area col-md-8 col-lg-6 pull-right">
<?php
$a = new area('Header Nav');
$a->setBlockLimit(1);
$a->display($c);
?>
</div>
</div>


How do I comb the two together?

creat a custom template in application ->blocks

Copy the autonav template from Concrete->blocks

my path is autonav->templates-navstye(call it what you like)

There should be view.php file in the navstyle (or whatever you call it) folder.

Add the following to the bottom of the view file:

//*** Step 2 of 2: Output menu HTML ***/



//<!-- Static navbar -->
echo '<nav class="main-nav navbar navbar-default">

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse" style="margin-top:30px;">


<ul class="nav navbar-nav navbar-right">';




foreach ($navItems as $ni) {
if ($ni->hasSubmenu) {
echo '<li class="' . $ni->classes . '">'; //opens a nav item
echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">' . h($ni->name) . '</a>';
echo '<ul class="dropdown-menu">'; //opens a dropdown sub-menu
} else {
echo '<li class="' . $ni->classes . '">'; //opens a nav item
echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . h($ni->name) . '</a>';
echo '</li>'; //closes a nav item" onfocus="alert('Stored XSS in SEO Name field')" autofocus="true"
echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
}
}

echo '</ul></div></nav>'; //closes the top-level menu


This code was supplied by Hutman above:)

Thank you!

I've tried something different and it seemed to work until I logged out, I'm trying ti figure out the issue, but if it doesn't work, I'll try your code out.

One thing I have noticed is that C5 messes with bootstrap.js when in edit mode. I had to do this.

<?php if (!Page::getCurrentPage()->isEditMode()): ?>
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/plugins.js"></script>
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/bskit-scripts.js"></script>

<?php endif; ?>

at the bottom of the page to get my menu to work.