Skip to content
GloboGlobo Docs
Install app
English

Custom CSS

Add your own CSS to fine-tune how the menu looks.

How-to guide All plans 2 min read

Use Stylesheet / CSS when settings, fonts and colors can’t do what you need — a special hover effect, one item’s font size, or a small theme fix. The CSS is saved with the menu and added to your storefront when you publish.

Add custom CSS

  1. Open the Advanced tab

    In the menu editor, click the Advanced icon (</>) in the left sidebar (1).

    Open the Advanced tab (1) and type your CSS in Stylesheet / CSS (2).

  2. Add your CSS

    Type or paste your CSS in Stylesheet / CSS (2), replacing the //enter css custom here placeholder.

  3. Save and publish

    Click Save, then Publish. Hard-refresh your storefront to see the result.

Target the right elements

The CSS is added to the page as is and isn’t limited to this menu, so scope your selectors:

  • All menus — start with .gm-menu.
  • One menu — start with .gm-menu-<ID>. To find the ID, right-click the menu on your storefront and choose Inspect.
  • One item — give it an Extra classname in the Advanced section of the item’s settings (see Edit a menu item), then use that class.

For example, to make an item with the extra classname sale-item bold and red:

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

The Advanced tab also has Market availability, which limits the menu to selected markets — see Show menus by market.

Troubleshooting

My CSS has no effect
  • Check that you clicked Publish after saving.
  • The app’s own styles often use !important, so your rule may need it too.
  • Look for typos such as a missing } — one error can stop the rules after it from working.

Was this helpful?

Report an issue