Advanced Menu Customizations (CSS Styling)

Online Menu: Tags is for advanced CSS styling / Online Menu customizations. These technical adjustments go beyond what's included in Buddi's user-friendly tool for Custom Branding.

Customizing your Online Menu with Advanced CSS
 
How it works:

1. Load the menu on your website.
    
2. Right-click on an area of the menu that you want to change > Select 'Inspect'. This instructs your internet browser to find the ID / Class name of the elements to be targeted and changed.
   
   
3. Enter any applicable changes; they can be previewed instantly from the internet browser.
   
   
4. If you are happy with the change, highlight the changes to copy and paste it into Buddi:
   Admin Portal > Store Settings > Online Menu: Tags > 'Head'.
   
   
5.  Hit 'Save'
   
   
6. Refresh your menu page to see the changes.

Quick Styling Tips for a Better Customer Experience:

Some IDs you can target with CSS:

#bdi-change-store {
// Sample code here. I.e display: none; to hide this section. 
}

#buddi-online-menu-nav {
// This is wrapping the navbar could be used for fix it's position or make it sticky. 
}

#bdi-nav-button {
// This targets the hamburger icon menu. 
}

#bdi-cart-button {
// This targets the cart button. 
}

#buddi-online-menu-filters {
// This targets the filters section. 
}

#menu-content {
// This targets the area where product tiles are shown. 
}

#buddi-online-menu {
// This is wrapping the entire menu
}