Number of columns in nav

Squiz Matrix Support
1

Hey,

We currently have a mega menu type navigation which displays the the lists in 2 equally sized columns.

I would like the option to increase this to 3 or 4 columns so that the parent height is smaller.

In the design file it has:

    <div class="nav-column-top">
      <div class="nav-column-content">
        <ul class="level-2">
        <MySource_ASSET>
          <li><a href="<MySource_PRINT var="asset_link" />"><MySource_PRINT var="asset_short_name" /></a></li>
        </MySource_ASSET>
        </ul><!-- end level 2 -->
      </div>
    </div><!-- end nav column -->
    <div class="nav-column-top">
      <div class="nav-column-content">
        <ul class="level-2">
        </ul><!-- end level 2 -->
      </div>
    </div>

Im not sure how it knows to split them equally between the two? as the second UL appears to be blank? will it be using javascript? I tried adding in another:

    <div class="nav-column-top">
      <div class="nav-column-content">
        <ul class="level-2">
        </ul><!-- end level 2 -->
      </div>
    </div>

But this didn’t work.

Can’t seem to find anything in our master.js file that could be changing this.

Example, go here and click on the arrow next to the Find/Contact Us button in the top navigation:

https://www.herts.ac.uk/

Thanks,

Tim

2

Not sure what your JS is doing but have you considered using CSS columns to split them in even columns without the need for JS?

https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns

1 Like
3

Hey Bart, thanks for this. I finally found the js code that was splitting it. I have removed it and implemented the css way. Much better!

1 Like