Navigation

Right column navigation

Right column navigation is using the default Plone 4 portlet navigation markup. On content types that are not using the redesigned header area it is always visible on the right column area until it collapses to the content area for resolutions lower than 1024px.

Mobile navigation

Mobile navigation is constructed from Right column navigation portlet and is visible for resolutions lower than 1280px.

It is appended to the global navigation which itself it's transformed to fit mobile resolutions with a maximum width of 400px.

In order for this navigation to show the following conditions need to be met:

1. The new style header and navigation needs to be enabled for the particular content type
2. Right column navigation portlet needs to be present on page, not blocked on the page or it's parent
3. Mobile header needs to be visible which is on resolutions of 1279px or lower

An example of this navigation in action is found on the About us page.

It requires the following markup in order to be styled as seen in the screenshot found below:

      <div id="header-holder">
       <div class="navbar-collapse">
          <div id="portal-top">
            <div id="portal-header">
              <div id="globalnav-holder">
                <ul id="portal-globalnav">
                  <li>Global menu links</li>
                  <!--? here is the mobile only navigation portlet -->
                  <li class="mobile-only">
                    <dl class="portlet portletNavigationTree">
                      Start of navigation portlet
                    </dl>
                  </li>
                </ul>
              </div>
            </div>
          </div>
       </div>
      </div>