Note: This article assumes a strong understanding of CSS concepts. If in doubt, reach out to a web developer for assistance.
By default, the Sippo menu adapts to your website's existing styles, inheriting styles your site has already defined.
If you'd like to customize the menu further, use this guide as a CSS cheatsheet:
Structure
The Sippo menu is divided into a few primary elements, noted with their CSS classes:
Container:
div.sippo-menuNavigation:
nav.topnavMenu:
main.menuSection:
section.menu__typeCategory:
div.categoryProduct:
div.menu-item
Footer:
div.footer
Each element has its own child elements, all of which can be easily targeted with CSS selectors. We recommend using the Inspect / Inspect Element tool of your browser when trying to determine the correct selector to use.
Defining Selectors
To prevent customizations from affecting other elements on your web page, we recommend all CSS selectors be nested under .sippo-menu, and are as specific as possible.
Nesting can be done using a CSS preprocessor such as SASS, or natively.
Typography
SIppo leverages standard hx headings:
h1: Menu Title
h2: Section Name (e.g. Beverages, Food)
h3: Category Name
h4: Product Name
Additional support
If you need any additional support while customizing your Sippo menu, feel free to reach out via email or chat.