Add or remove links to the navigation bar depending on screen size in 5.7

This tutorial is over a year old and may not apply to your version of Concrete CMS.
Apr 27, 2015

Step 1 Edit the autonav block. In the view.php (Make sure you choose the correct view.php. If you are using a template like the responsive_header_navigation you will have to edit the view.php in that folder) you need to enable the $navItem->attrClass attribute. Line 88 you need to un comment the following

/*
if (!empty($ni->attrClass)) {
    //class that can be set by end-user via the 'nav_item_class' custom page attribute
    $classes[] = $ni->attrClass;
}
*/

to

if (!empty($ni->attrClass)) {
    //class that can be set by end-user via the 'nav_item_class' custom page attribute
    $classes[] = $ni->attrClass;
}

Step 2 Create a Page attribute. In the dashboard Pages & themes, Attributes and create a Text Attribute called nav_item_class. This is documented in the view.php file.

Then for the page depending on what screen size you want to hide or show the link you can use some bootstrap css.

Example if you want to add a facebook and twitter link to a responsive mobile menu you would add them as external links within the sitemap. Then in the dashboard go Sitemap, Page Search and choose attributes for the relevant link. Add the nav_item_class to the page and enter visible-xs

More Bootstrap Available classes are available at http://getbootstrap.com/css/#responsive-utilities-classes

Recent Tutorials
How to Automate the Copyright Year
Dec 27, 2024

Learn how to keep your website's copyright year updated automatically in Concrete CMS.

How to change the path of a group of pages
Dec 23, 2024
By myq.

Change the canonical path without breaking things

Bi-directional Express associations
Dec 18, 2024
By myq.

Set up associations between Express entries in both directions

Display Express Data Across Multiple Sites
Dec 17, 2024
By myq.

A guide to configuring Express entities and the Express Entry List block to ensure proper data display across multiple sites.

Customize locale icons
Oct 29, 2024
By myq.

How to customize locale (language region) flags

Concrete CMS Caching Guide
Oct 16, 2024

An overview of types of caching in Concrete and considerations when using them.

Improvements?

Let us know by posting here.