C5 5.5.1, Twitter Bootstrap 2.0 and Header Nav global area markup
Permalink 2 users found helpful
Hi Guys
I'm a bit of a C5 newbie but I've managed to convert a template I made with Twitter Bootstrap into a theme for my site. So far so good. I'm now trying to render the navbar. In my theme I have:
<code>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">VizualMobile</a>
<?php $a = new GlobalArea('Header Nav'); $a->display(); ?>
</div>
</div>
</div>
</code>
This displays the navigation correctly however how do I get it so that the Header Nav uses the right markup, e.g. <li class="active"> for selected menu options. Is this even possible or do I need to use an autonav template which I've seen in other discussions but not fully understood yet.
Thanks for any help
Tim
I'm a bit of a C5 newbie but I've managed to convert a template I made with Twitter Bootstrap into a theme for my site. So far so good. I'm now trying to render the navbar. In my theme I have:
<code>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">VizualMobile</a>
<?php $a = new GlobalArea('Header Nav'); $a->display(); ?>
</div>
</div>
</div>
</code>
This displays the navigation correctly however how do I get it so that the Header Nav uses the right markup, e.g. <li class="active"> for selected menu options. Is this even possible or do I need to use an autonav template which I've seen in other discussions but not fully understood yet.
Thanks for any help
Tim
Click the block in edit mode and hit Custom Template > Header Nav. That should add the appropriate classes.
Thanks for the quick reply!
Unfortunately although the block has a red dotted outline when I hover over it it doesn't let me click on it. Strange. All the other editable blocks are fine apart from the navbar. I'm wondering if its something in the Bootstrap CSS/JS preventing it from being clickable ?
Unfortunately although the block has a red dotted outline when I hover over it it doesn't let me click on it. Strange. All the other editable blocks are fine apart from the navbar. I'm wondering if its something in the Bootstrap CSS/JS preventing it from being clickable ?
Ahhh OK, I fixed it
In my bootstrap.css (stock v2.0) on line 2507 I commented out
And now I can click the navbar block. I'm going to play around with the Custom Template next.
In my bootstrap.css (stock v2.0) on line 2507 I commented out
z-index: 1030;
And now I can click the navbar block. I'm going to play around with the Custom Template next.
Bingo - with a couple of tweaks in
It's working perfectly.
./concrete/blocks/autonav/templates/header_menu.php
It's working perfectly.
If you changed the custom template in the C5 core, you're going to want to copy it to /blocks with the same path to preserve it when you upgrade later on. Google Concrete5 Overrides to find out more.
Done. Thanks for the tip!
Hi
did you have a problem with class navbar-fixed-top when it came to the C5toolbar as the navbar overlaps it when signed in.
did you have a problem with class navbar-fixed-top when it came to the C5toolbar as the navbar overlaps it when signed in.
.navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
Sorry, this is what you need in elements/header.php
<?php $cp = new Permissions($c); if($cp->canWrite() && $cp->canAddSubContent()){ echo('<style type="text/css">.navbar{margin-top:50px;}</style>'); } Loader::element('header_required'); ?>
Hi, this worked perfectly for me in moving the navbar down below the Edit bar.
My problem now is that the navbar is covering the 'Publish' or 'Exit Edit Mode' buttons when you hover over the 'Edit' button on the Edit bar. I've attached a screenshot to explain.
My problem now is that the navbar is covering the 'Publish' or 'Exit Edit Mode' buttons when you hover over the 'Edit' button on the Edit bar. I've attached a screenshot to explain.
Change the navbar z-index.
the above code should do it
great this worked. many thanks
