Design and Custom template option doesn't work correctly for Autonav block
Sorry it's a long title and my first post on this forum so I hope this is the right place. Anyhow as the title implies I'm unable to enable the following option on my custom theme (screenshot below):
Basically for a bit of background I am developing a custom theme for the first time in C5.7 (I'm currently learning to program and figured this would be a good place to start learning) I used the tutorial here:
Now this has worked very well and has allowed me to get all the editable areas working a-ok for the most part. However the autonav block is showing vertically I need it to show horizontally. The trouble is I can't seem to be able to edit the block in C5.7 to make it work like the screenshot. All I get is the edit bar with no action when clicking on the various options.
This is my code in my theme:
<!-- Fixed navbar --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">SP<i class="fa fa-circle"></i>T</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <? $a = new Area('Header Nav'); $a->display($c); ?> </ul> </div><!--/.nav-collapse -->
I have attached a screenshot of the issue as I see it on my side.
If you need more info guys let me know. And any relevant things I should read let me know also as I'm trying to learn how to program and do things in C5.
When you launch the Design & Custom Template toolbar, what happens when you click the toolbar buttons? Are there any errors in your browser console?
This is the default view that will display when adding the Auto-Nav block. It includes the opening and closing ul tags.
If you want to customize the classes or change the structure of the HTML, you will want to create a custom template.
Also having a look at that documentation now and see if that yields anything.
Cheers still learning but having fun so far :)
I'll look at the documentation to see what could cause the issue. However I feel like my out of date Jquery that is in the theme may have something to do with this, might be an idea if I created a theme with just the menu bar and Nav and see if the issue occurs with an up to date jquery file. This being said I could be completely barking up the wrong tree (I'm only learning to program thus far)
Are you using the jQuery that comes with concrete5 or is your theme supplying your own?
I think the version is unrelated, unless you are suppling your own and it is very old.
When you launch the Design & Custom Template toolbar, what happens when you click the toolbar buttons?
Do you currently have only one page in your Auto-Nav block, "About us"?
The opening and closing UL tags in your theme code are unnecessary. The Auto-Nav already includes them.
There is actually 2 pages in the auto nav "home" and "about us" you can't see the other since the CSS isn't quite right to allow that to happen (shouldn't be too hard to fix). but when you exit edit mode or sign out of C5 you can see it and the links themselves work work.
Also when I click on the toolbar nothing happens at all. The errors you see in the toolbar are the result of me clicking the Design & custom template button.
EDIT: Oops forgot attachment
I recommend reading through the theme making documentation. Including the previous links I pasted.
Another excellent learning tool is seeing how the default Elemental theme is constructed.
Thanks again :)