Design System

Supernav

New SuperNav System

example site: https://www.junkluggersofraleigh.com

In the CMS, select Site Content and Nav Menus

You should see imported code from the supernav code in borders, if not you can click ADD NEW MENU ITEM and add each dropdown. You can add custom child pages in the same way. You can also drag and drop pages in order to change the order in which they display.

For Menu Name, TopNav and FooterNav are best practice. Select Top Nav or Footer Nav and then add [[top_nav]] or [[footer_nav]] in borders. This token should replace the entire php snippet for the supernav code.

Template ID will be the same as $superNav->superTemplateId for your particular site.

Selecting Dev Menu will only show the menu in a dev environment.

Item Types of Page, Silo and Custom URL will allow you to select a specific target. You can then select show grandchildren to show child pages in this dropdown. You can also add custom classes here such as “quote” for Book Now on Junkluggers sites.

Selecting “show parent link?” will show the parent link on mobile screens only. This is needed for many sites as the parent pages are not accessible on mobile navs and should therefore be available as a dropdown item so that users can access that page.

When “Split About Us” is set superNav tries to treat everything that is passed with a page ID as “About Us”. The superSplitDisplay and grandchildren options provide workarounds so super nav treats it like the page it is. It is therefore important to select Super Split Display on pages such as Commercial on Junkluggers so that supernav knows this is not the About Us page.

De-Mega Services Mega Nav

If the Services dropdown has very few links, try this:

Add this JS to borders inside </body>:

$('ul#top-nav-list li:first-child .dropdown.m-menu ').addClass('short');

Add this CSS override:

li.has-dropdown.not-click {
    position: relative !important;
}

example site: https://gutterguardsinpa.com

Misaligned Dropdown:not(Services)

If your “Our Company” dropdown has lots of links and is misaligned and missing the “short class”, try this:

@media screen and (min-width: 641px){
    li.has-dropdown.not-click {
        position: static !important;
    }

    ul.dropdown.m-menu {
        left: 0 !important;
    }
}

example site: https://www.ottawafoundationsupportworks.ca/

In some cases, when your mega nav links dont’ flow into nice even columns, try this fix:

ul.m-menu ul li {
        margin-bottom: 20px;
        float: none;
        -webkit-column-break-inside:avoid;
        column-break-inside:avoid;
    page-break-inside:avoid;
    break-inside:avoid;
    }

Default Snippet

Example http://www.connecticutbasementsystems.com/

This snippet will output the entire Nav chunk

  <?php
    $superNav = new nav();
    $superNav->superMode = 'top';
    echo $superNav->generateSuperMarkup();
?>

Custom Top

When you go Custom there are a few options. There are three targets: services, about, map. If you need to add a special page to the supernav you can add its page ID and move it around in the array. 

<?php
$superNav = new nav();
$superNav->superMode = 'top';
$superNav->superItems = array(
    'Services' => array(
        'target' => 'services'
    ),
    'Our Company' => array(
        'target' => 'about',
        'show_about_link' => true
    ),
    'Service Area' => array(
        'target' => 'map',
    ),
    'Free Quote' => array(
        'class' => 'quote',
        'target' => 'contact'
    ),
    43049 => array(
        'grandchildren' => true
    )
);

echo $superNav->generateSuperMarkup();
?>

You can force child pages

<?php
$superNav = new nav();
$superNav->superMode = 'top';
$superNav->superItems = array(
    'Services' => array(
        'target' => 'services'
    ),
    'Free Quote' => array(
        'class' => 'quote',
        'target' => 'contact'
    ),
    43049 => array(
        'children' => array(1,23234,23423)
    )
);

echo $superNav->generateSuperMarkup();
?>

Version 2 Top Nav with Sliding sticky bar

<?php
$superNav = new nav();
$superNav->superTemplateId = 3;
$superNav->superMode = 'top';
$superNav->superItems = array(
    'Services' => array(
        'target' => 'services'
    ),
    'Our Work' => array(
        'target' => 'about',
        'show_about_link' => false
    ),
    //Replace With Page ID of Financing Page
    12345 => array(
        'grandchildren' => false
    ),
    //Replace with Page ID of Reviews Page
    12345 => array(
        'grandchildren' => false
    ),
    'Service Area' => array(
        'target' => 'map',
    ),
    //Replace with Page ID of About Us Page
    12345 => array(
        'grandchildren' => false
    )
);

echo $superNav->generateSuperMarkup();
?>

If you need Our Work and About Us

look at the reviews for example. 

        <?php
            $superNav = new nav();
                $superNav->superSplitAboutWork = true;
                $superNav->superMode = 'top';
                $superNav->superItems = array(
                    'Services' => array(
                        'target' => 'services'
                    ),
                    'Reviews' => 159326,
                    'Our Work' => array(
                        'target' => 'work'
                    ),
                    159322 => array(
                        'target' => 'about',
                        'show_about_link' => true
                    ),
                    'Service Area' => array(
                        'target' => 'map',
                    ),
                    'Free Quote' => array(
                        'class' => 'quote',
                        'target' => 'contact'
                    )
                );

                echo $superNav->generateSuperMarkup();
        ?>

<script>
    $('ul#top-nav-list li:first-child .short').removeClass('short');
</script>
 
 <div id="footer-links">
    <?php
    $superNav = new nav();
    $superNav->superMode = 'bottom';
    echo $superNav->generateSuperMarkup();
    ?>
      <div class="social-footer"> <?php echo $socialFooter ?></div>
</div>

  <div id="footer-links">
      <?php
      $superNav = new nav();
      $superNav->superMode = 'bottom';
        $superNav->superItems = array(
          '205141' => array(
              'children' => array(205142, 205160, 213000, 213053, 212808)
          ),
          '205171' => array(
              'children' => array(213075, 212811, 212810, 212813)
          ),
          '204742' => array(
              'children' => array(213442, 212814)
          )
      );
      echo $superNav->generateSuperMarkup();
      ?>

      [[social_footer]]
  </div>

Description: Supernav dropdowns are a mess, we know. Until we have a new solution in place, to accommodate the range of customizations, please use this css fix if the dropdown menus alignment for Our Work or About Us is out of whack.

/* Nav dropdown position fixes */
@media screen and (min-width:1025px) {
    .top-bar-section li.has-dropdown:not(:first-of-type) {
        position:relative;
    }    
ul#top-nav-list ul.m-menu.short,
    ul#top-nav-list.right ul.m-menu.short {
        min-width:300px;
        width:unset;
        right:unset;
        left:0;
    }
}

If this doesn’t work, talk to Nicole about further options.