Forums

Autonav Responsive Navigation Template

Permalink
The responsive navigation template works good with Elemental, but when I try to use it on my own Bootstrap theme it fails. It doesn't have the standard bootstrap classes like described at get bootstrap.com. Is anyone else having a problem with it or got it working on themes other than Elemental?

thanks
pvernaglia
 
abra100pro replied on at Permalink Reply
abra100pro
+1
I really wish that documentation would be more and easier to be found.
MrKDilkington replied on at Permalink Reply 2 Attachments
MrKDilkington
While the Elemental theme uses Bootstrap for many things, it does not use the Bootstrap navbar.

I think this might have been the cause for some confusion.

The CSS for the Auto-Nav block and Responsive Header Navigation custom template is in the Elemental theme (in .less files). This CSS can be copied and modified to use in another theme or created from scratch.

Responsive Header Navigation custom template opening nav CSS class:
ccm-responsive-navigation
https://github.com/concrete5/concrete5/blob/develop/web/concrete/blo...

CSS for the Auto-Nav block:
https://github.com/concrete5/concrete5/blob/develop/web/concrete/the...

CSS for the Responsive Header Navigation custom template:
https://github.com/concrete5/concrete5/blob/develop/web/concrete/the...

I have attached the compiled CSS for the Auto-Nav block and the Responsive Header Navigation custom template.
abra100pro replied on at Permalink Reply
abra100pro
Thanks, I'll try this.
pvernaglia replied on at Permalink Reply
pvernaglia
I think the default Elemental menu works fine on a desktop, you can open the dropdown on hover and click to go to the top level page. But on smaller devices it only clicks to go to the top level page and you cannot see the dropdown. I'm finding clients don't want that.

I've been using my own bootstrap autonav template the, drop down works on click and just use the top level page as a placeholder. Most are happy with that, but would prefer to have access to the top level page.

The menu here on concrete5.org works very nice on both desktops and small devices, you have both the ability to dropdown the sub menu and navigate to the top level page. That's how I would like the menu to function, if anyone has an autonav template that does that please share it!
MrKDilkington replied on at Permalink Reply
MrKDilkington
@pvernaglia

"I've been using my own bootstrap autonav template the, drop down works on click and just use the top level page as a placeholder. Most are happy with that, but would prefer to have access to the top level page."

One approach I've seen to deal with this is to add a click event on the top level page link. On first click, you prevent default for the link and open the dropdown for the first level child pages. With the dropdown open, clicking a second time on the top level page link will open the link.

I have a few free navigation packages I am working on.
savvyeye replied on at Permalink Reply
savvyeye
Hi, I am not a developer and I am struggling, would you kindly share some of your Menus with me?

Thank you!
MrKDilkington replied on at Permalink Reply
MrKDilkington
@savvyeye

Are you trying to add a custom responsive navigation to an existing site or a site you are building/planning?

In general, any navigation menu code you use will need to be customized to fit your site theme.
blinkdesign replied on at Permalink Reply
blinkdesign
This is from an old thread. i have used that script for a while now and it works fine on phone and tablets. (elemental theme)
put it in header_top.php just before the end tag ot the header </header>.

<script type="text/javascript">
$( document ).ready(function() {
   $('.ccm-responsive-navigation.original ul li').has('ul').one("touchstart", function(e) {
      $(this).one('click', function(e) {
         e.preventDefault();
      });
   });
});
</script>


hope it helps.