Search

Custom Header

Create a custom header that better aligns with your brand and matches your main site's header.

You have 2 options:

  1. Use our sample code below and customize to your needs. This approach is more basic, anyone can do it!
  2. Create a fully custom header in a code editor and copy-paste into Dispense. This approach is more advanced, we recommend asking a developer friend for help.

Create a Custom Header

  1. Navigate to Store > Settings > Branding
  2. Upload Dark Mode Logos (if your header background is dark and you'd like to use alternate logos)
  3. In the 'Custom Header' field, paste your code snippet
  4. Save
  5. View your new header on your menu

Option 1: Sample Code

<div style={{ background: "#379d7b" }}> 
  <NavContainer> 
    <div style={{ display: "flex", flexDirection: "row" }}> 
      <StoreWebsiteLink style={{ padding: "10px" }}> 
        <StoreLogo 
          style={{ height: "40px" }} 
            logo={store.logoLight} 
          logoSquare={store.logoSquareLight} 
        /> 
      </StoreWebsiteLink> 
      <div 
        style={{ 
          display: "flex", 
          flexDirection: "row", 
        }} 
      > 
        <StoresDropdown></StoresDropdown> 
        <StoreRecMedDropdown></StoreRecMedDropdown> 
      </div> 
    </div> 
  </NavContainer> 
</div>

To style the sample code to your brand, we recommend the following edits:

Background Color

Change the background color. The example uses #379D7B, replace that with whatever hex code you'd like.

Logo

If you're using a dark background that requires a white or light logo, upload your Dark Mode Logos and make sure your logo StoreLogo is using logoLight and logoSquareLight (mobile breakpoint) instead of the default. The sample code contains these 2 lines of code:

logo={store.logoLight}

logoSquare={store.logoSquareLight}

If your background is still white or light, you can ignore this and Dispense will use the existing logos you uploaded.

Logo Height

Define a height for your StoreLogo (the example uses 40px) if you'd like it to be bigger or smaller than the default. Ideally, it would match the logo height from your main website.

Logo Padding

You can also adjust the padding around your logo, StoreWebsiteLink (the example uses 10px) to make your header taller or shorter.

Remove Store Dropdown (Only 1 store)

If you only have 1 store and want to remove the Store dropdown, delete the following line of code from the sample code: <StoresDropdown></StoresDropdown> 

Option 2: Developer Friends

Hello fellow developer friends: If you want to make a sticky header, go for it! However, there are a few pages where you don't want that extra margin to show up (account, cart, checkout, etc.), so put the code below (with appropriate margin px edits) into the custom Head Code field.

Note: The key is this line body:not(.header-locked) {, which allows you to add space for the sticky header but not on pages where Dispense locks the header.

<style>
body:not(.header-locked) {
  margin-top: 122px !important;
}

@media(max-width: 1023.98px){
  body {
    margin-top: 99px !important;
  }
}

#header {
  letter-spacing: 0.01px;
}
</style>

Troubleshooting

If you mess the whole thing up and want to revert back to the default, just delete all code from the Custom Header input and click Save.

Head Code

To add you own custom javascript and CSS, see how you can use the Head Code field.

Custom Files

To upload your own JS and CSS files, see Custom Files.