Sub nav - not appearing in mobile | use of paint layout

(Innes Zenati) #1

Matrix Version: 6

Hey all,

I am trying to figure out how the side nav works on a specific standard page (this has a layout selection of inner page with sub nav), this prints the child pages of the parent asset in the a LH nav. But on mobile view this disappears.

I have tried to find the source code in all relevant layouts with no luck, can see this in inspect element. I want to implement the same solution we have on our knowledge base - https://kb.ros.gov.uk/land-and-property-registration/pre-registration/advance-notices

In mobile the LH nav menu moves to the top within a drop-down. The difference with this though is that this page has manual anchor links added within the metadata, it prints these in the LH nav and then moves them to the top in mobile.

How do I source the HTML for this page printing the child pages in the LH nav?? https://www.ros.gov.uk/guidance

Is this in the design as I cannot find anything in the relevant paint layouts and dont want to have to rebuild this to work similar to KB site?

(Innes Zenati) #2

Every days a school day as they say! I have never had to edit the parse file of a design area but have now found this. Its not something I have ever done so reluctant to change the sub_nav design area but I assume this is the only section I can edit to change the behaviour of the side nav to appear in mobile??

(Innes Zenati) #3

I am looking at the possibility of using a paint layout to have the sub nav move to the top within a drop-down, similar to how our KB site works but not sure if this will work with the nav working differently. Would this work?

<div class="col-xs-12 col-sm-12 col-md-3 col-md-offset-0 col-lg-3 scrollspy">
%begin_condition_3%
<!--noindex-->
 <nav class="hidden-xs hidden-sm article-nav">
  <ul class="nav kb-nav-affix" data-spy="affix" data-offset-top="200" data-offset-bottom="600">
    <li class="nav-title"><strong>In this article</strong></li>
    %asset_metadata_anchor.link.html%
    <li class="top"><a href="#">Back to top <i class="fa fa-sort-asc" aria-hidden="true"></i></a></li>
  </ul>
 </nav>
<!--endnoindex-->
%end_condition_3%
</div>
(Harinder Singh) #4

If you do not have a test environment then I advise you to create a test design file and modify it accordingly. You can test it on live site by applying it as alternative design without affecting the live environment.

Another solution is via Paint layouts with either SSJS or Asset listings. You can control(enable/disable) this behavior via metadata screen.

Third option is to use show_if design area in the parse file

<MySource_AREA id_name="show_side_column" design_area="show_if" print="no">
   <MySource_SET name="condition" value="keyword_regexp"/>
   <MySource_THEN>%globals_asset_contents_paint_layout_id_123456:<MySource_PRINT id_name="__global__" var="asset_assetid" />%</MySource_THEN>
   <MySource_ELSE><!--  Disabled: Side bar --></MySource_ELSE>
</MySource_AREA>
(Innes Zenati) #5

Hey Harinder, thanks for coming back to me with these options. Very much appreciated as ever! Yeah no test environment, just used a sandbox at the moment which suits us for now.

Both the paint layout and show_if design area in parse file looks the easiest to set up. I will give these a try in sandbox and let you know how I get on.

Thanks again
Innes

(Nic Hubbard) #6

This sounds like a CSS issue to me.

(Innes Zenati) #7

Hey NIc, I don’t think it is. I have looked back at previous versions of the site when the old matrix dev created these sub navs and this particular sub nav never appeared in mobile when checking. I will take a look at the CSS and see if there is anything but nothing html to suggest to should ‘affix-top’ or bottom like the other site pages.

(Innes Zenati) #8

Hi Nic, this is the only CSS for the sub nav class:

.sub-nav li.level-1 a {
padding-left: 0.789em;
}

.sub-nav a {
display: block;
text-decoration: none;
color: inherit;
padding: 1em 0;
}