Custom Header

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

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

We recommend creating this in a code editor and copy-pasting into Dispense or use our sample code below to get started.

<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>

 

Styling the Sample Code

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
 

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.