HighFive Design System

Mobile Menu

This is the general markup for the mobile menu component. The preview can't be rendered on this page because of various conflicts, but you can see examples at msstate.edu, admissions.msstate.edu, and its.msstate.edu.

The mobile menu serves not only as the mobile menu, but also as a visible menu component when scrolling past the main navigation or for full hero page displays. See other sections for more information on all the customization and behavior.

It is composed of three components: .mobile-menu-logo-container, .mobile-menu-btn-container, and .mobile-menu-navbar-container.

HTML

<nav id="mobile-menu" class="mobile-menu navbar d-block d-lg-block fixed-top scroll-hide" aria-label="Mobile Navigation">

  <div id="mobile-menu-logo-container" class="mt-5 mt-sm-0 col-12 col-sm-7 col-md-6 col-lg-5 col-xl-4">

    <div class="logo-container">
      <a id="mobile-menu-logo" href="/" title="Mississippi State University | Home">
        <img src="//cdn01.its.msstate.edu/i/logos/msstate/HORIZONTAL_WEB_white_maroon_m.svg" alt="Logo for Mississippi State University" title="Mississippi State University">
      </a>
    </div>

  </div>

  <div id="mobile-menu-btn-container" class="container-fluid no-max-width navbar-expand py-0 justify-content-end">

    <form class="search-form collapse collapse-horizontal" id="collapse-search-mobile" role="search" action="https://www.msstate.edu/site-index/" method="get" aria-label="Search MSSTATE">
      <label for="search-terms-mobile" class="sr-only">Search MSSTATE</label>
      <div class="input-group flex-nowrap">
        <input class="form-control" id="search-terms-mobile" name="terms" placeholder="Search MSSTATE" type="text">
        <button class="btn btn-white btn-search-toggle" title="Search MSSTATE" aria-label="Toggle mobile search field" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search-mobile" aria-expanded="false" aria-controls="collapse-search-mobile">
          <span class="fas fa-times"></span>
          <span class="sr-only">Toggle mobile search field</span>
        </button>
        <button class="btn btn-gray-200 btn-search-form text-black" title="Search" aria-label="Search" type="submit">
          <span class="fas fa-search me-1"></span>
          Search
        </button>
      </div>
    </form>

    <ul class="navbar-nav me-auto me-sm-0">
      <li class="nav-item university"><a class="nav-link" href="https://my.msstate.edu/">myState <span class="sr-only"> on Mississippi State University</span></a></li>
    </ul>

    <button class="btn btn-black btn-search-toggle" title="Search MSSTATE" aria-label="Toggle mobile search field" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search-mobile" aria-expanded="false" aria-controls="collapse-search-mobile">
      <span class="fas fa-search"></span>
      <span class="sr-only">Toggle mobile search field</span>
    </button>

    <button class="hamburger hamburger--spin btn-mobile-menu-toggle" type="button" data-target="#mobile-menu-navbar-container" aria-controls="mobile-menu-navbar-container" aria-expanded="false" aria-label="Toggle mobile navigation">
      <span class="hamburger-box">
        <span class="sr-only">Menu</span>
        <span class="hamburger-inner"></span>
      </span>
    </button>

  </div>

  <div id="mobile-menu-navbar-container" class="navbar-container">

    <div class="bg-container">
      <div class="bg-img" style="background-image: url( https://cdn01.its.msstate.edu/i/msstatehighfive/img/background/bg_menu-default-3.jpg );"></div>
      <div class="bg-color"></div>
      <div class="bg-blend"></div>
    </div>
    
    <ul class="menu--mobile-main navbar-nav flex-column justify-content-md-center text-white px-4 px-md-0">

      <li class="nav-item row gx-md-7 mx-0 menu-depth-0">
        <div class="col-md-5 col-lg-4 text-md-end">
          <a href="#" id="menu-mobile-main--menu-item-1" class="nav-link">Menu Item 1</a>
        </div>
      </li>

      <li class="nav-item row gx-md-7 mx-0 menu-depth-0">
        <div class="col-md-5 col-lg-4 text-md-end">
          <a href="#" id="menu-mobile-main--menu-item-2" class="nav-link" data-bs-toggle="collapse" data-bs-target="#collapse--menu-item-2" aria-controls="collapse--menu-item-2" aria-expanded="false">Menu Item 2</a>
        </div>
        <div class="col-md-7 col-lg-8 overflow-scroll position-md-absolute h-md-100 top-md-0 right-md-0 d-md-flex align-items-md-center text-md-start">
          <div class="collapse span-3 collapse--menu-item-2 w-100" id="collapse--menu-item-2" data-bs-parent="#mobile-menu-navbar-container">
            <div class="row g-0 row-col-3">
              <div class="nested-group col-12 col-lg-7 col-xl-7 pb-4 py-md-4">
                <a href="#" class="nested-link font-size-90 fst-italic mb-3">Go to Menu Item 2 →</a>
                <a href="#" class="nested-link menu-depth-1 has-children">Section Item 1</a>
                <a href="#" class="nested-link menu-depth-2">Sub-sectoin Item 1</a>
                <a href="#" class="nested-link menu-depth-2">Sub-sectoin Item 2</a>
              </div>
              <div class="nested-group col-12 col-lg-7 col-xl-7 pb-4 py-md-4">
                <a href="#" class="nested-link menu-depth-1 has-children">Section Item 2</a>
                <a href="#" class="nested-link menu-depth-2">Sub-sectoin Item 1</a>
                <a href="#" class="nested-link menu-depth-2">Sub-sectoin Item 2</a>
                <a href="#" class="nested-link menu-depth-2">Sub-sectoin Item 3</a>
              </div>
            </div>          
          </div>
        </div>
      </li>

      <li class="nav-item row gx-md-7 mx-0 menu-depth-0">
        <div class="col-md-5 col-lg-4 text-md-end">
          <a href="#" id="menu-mobile-main--menu-item-3" class="nav-link" data-bs-toggle="collapse" data-bs-target="#collapse--menu-item-3" aria-controls="collapse--menu-item-3" aria-expanded="false">Menu Item 3</a>
        </div>
        <div class="col-md-7 col-lg-8 overflow-scroll position-md-absolute h-md-100 top-md-0 right-md-0 d-md-flex align-items-md-center text-md-start">
          <div class="collapse collapse--menu-item-3 w-100" id="collapse--menu-item-3" data-bs-parent="#mobile-menu-navbar-container">
            <div class="nested-group col-12 col-lg-7 col-xl-7 pb-4 py-md-4"><a href="#" class="nested-link font-size-90 fst-italic mb-3">Go to Menu Item 2 →</a>
              <a href="#" class="nested-link menu-depth-1">Sub-menu Item 1</a>
              <a href="#" class="nested-link menu-depth-1">Sub-menu Item 2</a>
              <a href="#" class="nested-link menu-depth-1">Sub-menu Item 3</a>
            </div>            
          </div>
        </div>
      </li>

      <li class="nav-item row gx-md-7 mx-0 menu-depth-0">
        <div class="col-md-5 col-lg-4 text-md-end">
          <a href="#" id="menu-mobile-main--menu-item-4" class="nav-link">Menu Item 4</a>
        </div>
      </li>
    
    </ul>
    
    <div class="menu--mobile-msstate z-index-10 h-100 d-none d-lg-flex col-lg-3 position-absolute top-0 right-0 align-items-center">
      <div class="list-group">
        <a href="https://www.msstate.edu" class="fw-bold h5 mb-0 text-uppercase list-group-item list-group-item-action university">MSState</a>
        <a href="https://www.msstate.edu/calendars" class="list-group-item list-group-item-action university">Calendars</a>
        <a href="https://www.msstate.edu/site-index" class="list-group-item list-group-item-action university">A-Z Index</a>
        <a href="https://www.msstate.edu/directory" class="list-group-item list-group-item-action university">Directory</a>
        <a href="https://map.msstate.edu/" class="list-group-item list-group-item-action university">Maps</a>
        <a href="https://www.msstate.edu/newsroom" class="list-group-item list-group-item-action university">Newsroom</a>
        <a href="https://www.msstate.edu/contact" class="list-group-item list-group-item-action university">Contact</a>
      </div>
    </div>

  </div>
  
</nav>
Organisms

Mobile Menu: Standard Display

The standard display is the default behavior for mobile menu. This is typically used with the maroon header. Though labeled as the mobile menu, it has other use cases, specifically when the main navigation isn't visible.

  • On large displays, it slides in from the top of the window when the user scrolls up and the main navigation is not visible.
  • On small displays, it is visible at the top of the page, and it slides in from the top of the window when the user scrolls up.
Organisms

Mobile Menu: Full Screen Hero Display

When using a full screen hero, the maroon header and main navigation are now gone. In this instance, the mobile menu is always on. 

  • On all displays, it is visible at the top of the page, and it slides in from the top of the window when the user scrolls up.

Usage

Add the classes .page-display--full-hero.page-hero--yes to the mobile-menu nav container

HTML

<nav id="mobile-menu" class="page-display--full-hero page-hero--yes mobile-menu navbar d-block d-lg-block fixed-top" aria-label="Mobile Navigation">
Organisms

Mobile Menu: Social Icons

Social Icons are added automatically if there is a #social-footer element on the page. Specifically the code looks for #social-footer .nav-item .nav-link.social-icon and iterates over each item adding to the menu.

HTML

<li class="nav-item nav-item-social row gx-md-7 mx-0 mt-5 menu-depth-0">  
  <div class="col-md-5 col-lg-4 text-md-end">
    <a class="nav-link social-icon facebook" href="http://www.facebook.com/msstate/" title="Find Mississippi State University on Facebook">
      <span class="sr-only">Find Mississippi State University on Facebook</span>
      <span class="fab fa-facebook"></span>
    </a>
    <a class="nav-link social-icon instagram" href="https://instagram.com/msstate/" title="Find Mississippi State University on Instagram">
      <span class="sr-only">Find Mississippi State University on Instagram</span>
      <span class="fab fa-instagram"></span>
    </a>
    <a class="nav-link social-icon linkedin" href="http://www.linkedin.com/company/10413/" title="Find Mississippi State University on Linkedin">
      <span class="sr-only">Find Mississippi State University on Linkedin</span>
      <span class="fab fa-linkedin"></span>
    </a>
    <a class="nav-link social-icon pinterest" href="http://www.pinterest.com/msstate/" title="Find Mississippi State University on Pinterest">
      <span class="sr-only">Find Mississippi State University on Pinterest</span>
      <span class="fab fa-pinterest"></span>
    </a>
    <a class="nav-link social-icon x-twitter" href="http://www.twitter.com/msstate/" title="Find Mississippi State University on X Twitter">
      <span class="sr-only">Find Mississippi State University on X Twitter</span>
      <span class="fab fa-x-twitter"></span>
    </a>
    <a class="nav-link social-icon youtube" href="http://www.youtube.com/msstateur/" title="Find Mississippi State University on Youtube">
      <span class="sr-only">Find Mississippi State University on Youtube</span>
      <span class="fab fa-youtube"></span>
    </a>  
  </div>
</li>