Advanced Menu Customizations (CSS Styling)

Modified on Mon, 17 Jun at 3:58 PM

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
}


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article