Header & Footer
      Back to home
      1. Knowledge Base
      2. Building in Nyla
      3. Header & Footer

      Building a Header

      Easily add and modify your site menu with blocks.

      This article walks you through building a header in Nyla and contains you useful blocks that you can use to get started. 

      Contents: 

      Overview

      Headers in Nyla are "global" sections, meaning that they appear on every page automatically.

      This means that: 

      • The header will always appear as the first section on the page.
      • Editing your header will edit it on all pages. 

      Whilst it's true that there's only one global header with normal section settings, it's possible to configure multiple header styles. You can do this by configuring different nav bars to serve as your different menu styles that can hide or show on different pages. 

      Note on overrides: Given that the header applies on all pages, we recommend not to use overrides for any content on your header, because that content would only appear on one specific page. 

      To change the content on headers that isn't coming from a source, you should edit the header template directly. 

      Referencing Shopify menus: You can reference your Shopify menus by using the menu source.

      We recommend to use menu source if you're going to have more than one header option in Nyla so that you only need to update one location if you are going to make changes to your navigation links.

      Content items

      The following content items are used when building menus:

      • Nav bar to act as a vertical container for different sections of your menu, or different menu styles
      • Menu & menu item to configure the menu items on your desktop menu, including adding and styling dropdowns and the content inside
      • Mobile tray to act as the container for your mobile menu
      • Sequential menu to configure sequential menus for mobile. It's common to also use accordions for this too
      • Source menu content item enables you to use the source menu properties to reference your Shopify menus as properties. 

      Whilst these content items are used in the building process, we recommend to start from blocks which provide faster jumping off points with which to build your header. 

      Blocks


      Learn about adding announcement bar blocks:


      Announcement Bars: 

      • Announcement bar: Simple
        • Adds a simple announcement bar to your header
      • Announcement bar: Slider
        • Adds a rotating announcement bar to your header
      • Announcement bar: Marquee
        • Adds a rotating announcement bar to your header
      • Announcement bar: Dismisable
        • Adds a simple announcement bar that can be dismissed/removed to your header
      • Announcement bar:  Icons
        • Adds an announcement bar containing 3 highlighted copy with icons
      • Announcement bar:  Currency & Links
        • Adds an announcement bar with built-in currency selector on desktop

      Nav Bars:

      Follow along in the video: 

      • Nav Bar: Center Logo
        • Adds a nav bar layout with the logo in the center
      • Nav Bar: Left Logo
        • Adds a nav bar layout with the logo on the left

      Menu Link Level Blocks:

      • Menu item: Megamenu  w link lists
        • Adds a layout with categories & links for your menu dropdown
        • Requirements:
          • Must be added inside a Menu content item
      • Menu item: Megamenu w photos
        • Adds a layout with categories & image banners for your menu dropdown
        • Requirements:
          • Must be added inside a Menu content item
        • Adds a simple layout with links for your menu dropdown
        • Requirements:
          • Must be added inside a Menu content itemMenu item: Simple dropdown
      • Menu item: Cart icon w count
        • Adds a cart icon layout with a built-in cart count
        • Requirements:
          • Must be added inside a Menu content item
      • Menu item: Cart text w count
        • Adds a cart text layout with a built-in cart count
        • Requirements:
          • Must be added inside a Menu content item
      • Menu item: Account icon
        • Adds an account icon that links users to the login page
        • Requirements:
          • Must be added inside a Menu content item

      Mobile Menu Styles:

      Note: These blocks need to be added within the mobile tray content item. 

      • Mobile Tray: Accordion
        • Adds a layout for the mobile tray with links inside collapsible accordion panels
        • Requirements:
          • Must be added inside a Mobile Tray
      • Mobile Tray: List
        • Adds a simple layout for the mobile tray with a list of links
        • Requirements:
          • Must be added inside a Mobile Tray
      • Mobile Tray: Sequential Menu
        • Adds a sequential menu layout to your mobile tray
        • Requirements:
          • Must be added inside a Mobile Tray
      • Currency Switcher Modal
        • Adds a modal layout for switching between different currencies on mobile