Styling toolbars

There are several ways to organize and style toolbars, depending on what look you're trying to achieve:

Add separators and line breaks when creating toolbar items.
Using Note Toolbar's Styles section of settings: This allows you to individually style toolbars, and define their behavior.
Using the Style Settings Plugin: Applies styles globally to all toolbars, overriding the defaults (which are designed to adapt to the theme). You can use this to fix certain issues you encounter with your theme.
Using Custom styling and CSS snippets, if you wish to make even more specific changes. See Custom styling.

See Note Toolbar Callouts for how to apply styles in callouts specifically.

Styles section

Style individual toolbars using this section of the settings, or right-click on a toolbar (long-press on mobile) and select Style....

Here's how it works:

Styles added to the Defaults section apply to both desktop and mobile (i.e., phone and tablet), unless they're overridden...
...in the Mobile section. Here you can add equivalent styles that allow you to override the defaults.

In the example below, on mobile the toolbar will not have a border, and not be sticky, but the items will stay as right aligned.

Style	Example/Clarification
auto-hide 🖥️	Hides the toolbar until you hover over it. ⚠️ Only applies on desktop.
border	Adds borders to the toolbar depending where it's positioned. Under properties, for example, a top and bottom border are added.
no border 📱	Simply remove the `border` style if you don't want a border; use `no border` if you don't want a border specifically on mobile.
button	Styles items to look like buttons.
center items
content width	Stretches out the toolbar to fit the content's full width. This is the default. ⚠️ Only available in mobile styles, if needed to override the `editor width` style.
editor width	Stretches out the toolbar to fit the editor's full width. Only works when the toolbar is in the `Top (fixed)` position.
space between items
space items evenly
left align items	This is the default alignment; use this if you want left alignment on mobile.
right align items
sticky	Sticks toolbar to top on scroll, when toolbars are positioned `Below Properties`. ⚠️ Not supported in Reading mode (see this issue).
not sticky	Simply remove the `sticky` style if you don't want it to stick; use `not sticky` if you don't want it to stick on mobile.
don't wrap items 📱	Mobile only. When set, all items will be on one line making the toolbar horizontally scrollable. ⚠️ For this to work best, ensure your items are not centered or evenly spaced (i.e., left-align them).

Notes on the order in which styles are applied:

Styles are applied in the order you add them. Per how CSS works, styles later in the lists take precedence.
In case it helps, styles are defined alphabetically in styles.css (with the exception of float which is at the top).

To style menus:

First, Obsidian's native menus option must be disabled: Settings → Appearance → Native Menus
Use the Style Settings Plugin or custom styling.