Section Nav Menu as buttons/boxes

Current setup converts items to boxes when Section nav is placed in the Second content region (right one on the side-by-side)


.region-content-second .section-nav li {

list-style: none;

background-color: #fff;

text-align: center;


.region-content-second .section-nav li {
    list-style: none;
    background-color: #fff;
    text-align: center;

.region-content-second #boxes-box-os_pages_section_nav {

Read more about Section Nav Menu as buttons/boxes

CSS Grid using flex or grid

Using CSS flex

First on the ul:

    display: flex;
    grid-gap: 0 35px;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;

And then on the li:

    list-style: none;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    min-height: 90px;
    flex-basis: 220px;
    flex-flow: column;
    align-items: flex-start;

Read more about CSS Grid using flex or grid

Custom Branding Header

As seen

Custom HTML widget with class = "branding" containg School logo and link needs to be added.


custom CSS:


.branding {
    width: 100%!important;
.logo img{
.region-header-second .block:first-child p:last-child {
    float: right;
    font-weight: bold;
    text-transform: uppercase;
.region-header-second .block:first-child p:last-child a, .region-header-second .block:first-child p:...

Read more about Custom Branding Header

Equal Heights jQuery

Replace classes at bottom



<script src=""></script>
/* Thanks to CSS Tricks for pointing out this bit of jQuery
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

equalheight = function(container){...

Read more about Equal Heights jQuery