Forums

5.7 Auto-Nav Template to create 2 header navigations

Permalink
Hi!

I've been working my way through the forums and documentation to try and find something that could help me with this. I've managed to find my way through every issue I've had before with C5 but this one seems to fox me.

Basically, my design has a split header navigation, 4 links on the left of a logo and 4 on the right. Both sides have drop-down/sub-pages and I really want to use the Auto-Nav block for this so that the client can have the ability to edit the menu items easily.

My fix was to add a new Custom Attribute of "include_right_nav" and "include_left_nav" so that I could create 2 custom templates and use these to show the navigation items in the correct locations?

I'm struggling with 5.7 however, to be able to create these custom templates, where to put them in my install and how to get the dropdowns/sub-pages to still show?

Any help would be awesome!

Thanks in advance!
Prkns
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi Prkns,

Can you attach an image of your split header navigation?

Will there always be four top level links on the left side and four top level links on the right side?

I have a couple ideas, but will know more once I see what you are trying to make.
Prkns replied on at Permalink Reply 1 Attachment
Prkns
Header navigation mockup attached. Links 2,3,4 and 5,6,7 will have dropdown/sub-pages and yes, as far as i can tell and from what we've discussed with the client, they will only ever have the 4 main links, it's the sub-pages under these pages that will be changing.

Thanks for your reply.
MrKDilkington replied on at Permalink Best Answer Reply 2 Attachments
MrKDilkington
Here is one approach. Before the fifth top level navigation link, display an image.

You will copy the existing Auto-Nav responsive_header_navigation custom template and then make changes to the copy.

- copy view.php from this folder path
concrete\blocks\autonav\templates\responsive_header_navigation\view.php
- create this folder path in your application folder
application\blocks\autonav\templates\split_navigation
- paste view.php into the split_navigation folder
- open the pasted view.php, from line 115 to the end, replace the existing code with this code:
echo '<nav class="ccm-responsive-navigation original"><ul>'; //opens the top-level menu
$i = 1;
foreach ($navItems as $ni) {
    if ($ni->level == 1) {
        if ($i == 5) {
            echo '<img style="position: relative; left: -20px;" class="split-nav-logo" src="http://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/0019/6391/brand.gif">';
        }
        ++$i;
    }
    echo '<li class="' . $ni->classes . '">'; //opens a nav item
    $name = (isset($translate) && $translate == true) ? t($ni->name) : $ni->name;
    echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $name . '</a>';
    if ($ni->hasSubmenu) {
        echo '<ul>'; //opens a dropdown sub-menu
    } else {
Viewing 15 lines of 21 lines. View entire code block.

- apply the split_navigation custom template to the Auto-Nav block

I attached a screenshot of what it might look like and the custom template (with folders)
Prkns replied on at Permalink Reply
Prkns
You sir, are a gentleman!

Thanks in advance for this... I'll get it tested out in a little while and see what happens... from what I've read of it so far, it looks perfect.
Prkns replied on at Permalink Reply
Prkns
This works pretty much perfectly. I did some editing of the classes and how the logo works etc, but it's brilliant!

Thank you!