Public Header

This guide provides a few pieces of information that is useful to know when making a header for Public Layout usage.

Header Height

The following variables will be found but commented out in the _variables_for_retailer_0000.scss file generated by the Core-Customizations app.

Most of the time the mobile app size will remain unchanged, but the desktop size of 133px will likely change based on the height of the retailer’s logo and other design choices.

Sidenav and Sidebar Toggle Buttons

The Public Layout has two areas (Sidenav and Sidebar) that can display and hide based on cookies, retailer preferences, or be activated when the appropriate toggle button is clicked.

In the desktop layout the Sidenav and Sidebar are columns sitting next to the main content of the page that can be hidden or revealed. In mobile sizes they overlay the main content using Bootstrap’s Offcanvas component. Because there are two approaches to displaying the Sidebar and Sidenav there are also two sets of buttons for each layout area. One button handles desktop column and another button handles mobile Offcanvas. We hide and display the appropriate button based on media queries.

The follow examples show the buttons needed to toggle these areas.

Sidenav Example

In this example you’ll see the first button handles desktop views and the second button handles mobile views.

<button class="btn btn-plain d-none d-xxl-block" data-sidenav-toggle>
  <i class="fa-solid fa-bars"></i>
</button>
<button class="public-sidenav-offcanvas-btn btn btn-plain d-xl-block d-xxl-none" data-bs-toggle="offcanvas" data-bs-target="#public-sidenav-mobile">
  <i class="fa-solid fa-bars"></i>
</button>

Sidebar Example

In this example you’ll see the first button handles desktop views and the second button handles mobile views.

<button class="btn btn-plain d-none d-xl-block" data-sidebar-toggle>
  <i class="fa-regular fa-square-check"></i>
</button>
<button class="public-sidebar-offcanvas-btn btn btn-plain d-lg-block d-xl-none" data-bs-toggle="offcanvas" data-bs-target="#public-sidebar-mobile">
  <i class="fa-regular fa-square-check"></i>
</button>