Jump to content

Foundation Template Navigation Bar


Recommended Posts

I will check out the document manager.  I already have the Vertical Navigation Plugin.  I need to figure out how to include the vertical navigation plugin on mobile.  His instructions show how to include it in your template and how to only display it in mobile.  I need it displayed in regular browser and responsive. 

Link to comment
Share on other sites

The problem I am having is I have 38 parent categories with 6 Document pages.  I tried lumping these 38 parent categories but 35 of them need to go into 1 category.  The drop down menu was so large the users would have to scroll down.  The vertical navigation works perfect but the one from Semperfi doesn't have a mobile option.  At least not that I can tell.  I sent him an email.  Will provide an update as soon as I find out.  

On a second note there is an option to hide the navigation bar in which I could hide the navigation bar so I could input my own custom bar I guess.  

Link to comment
Share on other sites

.... The vertical navigation works perfect but the one from Semperfi doesn't have a mobile option.  At least not that I can tell.  I sent him an email. 

I haven't seen how the Semperfi navigation uses foundation but it should automatically disappear and become a mobile friendly menu below a certain screen size and I would be very surprised if they haven't worked this in to their mod.

In fact I've just visited their demo store and their vertical navigation mod does just that, on a small screen or mobile device the navigation disappears and becomes a horizontal menu displaying the catergories which is exactly how responsive design should work when using foundation

Edited by onebrowncow
Link to comment
Share on other sites

How do you remove the Categories from the Navigation Bar? There are so many categories it is too overwhelming so I use a side navigation box.  Instead I would like to add Document pages in that area. 

Regarding removing the horizontal categories bar you would need to customise the main.php template. Doing so requires a full understanding of how the Foundation grid works and would require that the following code was retained somewhere within your new grid.

            <div class="row">
               <div class="the foundation classes entered here would change depending on changes made">
                  {include file='templates/box.navigation.php'}
               </div>
            </div>

In the location from where you removed this in main.php you could, for example, insert a link to a custom smarty template for a new documents only navigation bar

Whatever you do to change the layout of the main.php template you must retain the code include file='templates/box.navigation.php' otherwise your category navigation won't appear.

My best advice for anyone looking to make major skin changes to CC6 is to learn and understand how Foundation works first and then move forward. All the documentation for Foundation is available online.

Link to comment
Share on other sites

Hi Atechstl,

I believe I just answered an email you sent me regarding this.

To hide the horizontal navigation for desktop/ medium mobile, you can replace this:
 

            <div class="row">
               <div class="small-12 columns small-collapse">
                  {include file='templates/box.navigation.php'}
               </div>
            </div>

with this:
 

            <div class="row hide-for-large-up">
               <div class="small-12 columns small-collapse">
                  {include file='templates/box.navigation.php'}
               </div>
            </div>

or this:
 

            <div class="row hide-for-medium-up">
               <div class="small-12 columns small-collapse">
                  {include file='templates/box.navigation.php'}
               </div>
            </div>

in the '/skins/foundation/templates/main.php' file.

Of course if you never want it displayed, the top code snippet can be removed completely.

If you only want to remove the categories, then you could remove this:
{$NAVIGATION_TREE}
from the '/skins/foundation/templates/box.navigation.php' file instead.

As I noted in my email, the vertical navigation was never intended to be displayed for mobile devices.
Instead it simply disappears as intended.

To display it for mobile, the ideal solution would be to add this:
{$SFWS_VERTICAL_NAVIGATION_BOX}
into the '/skins/foundation/templates/box.off_canvas.left.php' file.

But currently that doesn't quite work as expected.
It almost works, but there is issues with displaying the sub categories.

If I get the spare time this week, I will release a new version of the plugin where this functionality works 100% correctly.

 

Link to comment
Share on other sites

Hi SemperFi,

Yes you replied to my email.  Thank you so for being so helpful. I was able to fix my navigation bar the way I wanted.  In the past I removed the Categories however the trick is to clear the cache for the changes to take effect.  By removing the categories, I will for sure need the vertical navigation module to work in responsive mode.  The site I am working on there is about 38 parent categories and several sub categories. If I may put in a request, sub categories aren't required to be displayed in responsive mode mode but needed in regular mode.  

Also note that when you take the categories away from the Main Navigation bar in the foundation template and add your own custom links, they aren't displayed in the mobile template.  I just have a blank bar.  Go figure.  I may just have to hide this bar in responsive somehow.  The links are in the footer anyway. 

 

Edited by Atechstl
Link to comment
Share on other sites

The 'Vertical Navigation Box CC6' plugin has just been updated.

New Features
- one box to display categories
- one box to display site documents
- separate templates for desktop and mobile
- separate settings for desktop and mobile
- mobile boxes utilize off canvas functionality

Screenshots
Categories Desktop
SFWS-VNB-CC6-P-07-Store-Categories-Deskt
Categories Desktop, Expanded
SFWS-VNB-CC6-P-08-Store-Categories-Deskt
Documents Desktop
SFWS-VNB-CC6-P-09-Store-Documents-Deskto
Categories Mobile
SFWS-VNB-CC6-P-10-Store-Categories-Mobil
Categories Mobile, Expanded
SFWS-VNB-CC6-P-11-Store-Categories-Mobil
Documents Mobile
SFWS-VNB-CC6-P-12-Store-Documents-Mobile

You can see it in action at my CubeCart 6 Plugins Demo Store

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...