The site header contains the site logo (if added in Publish settings), the site name, and the mobile hamburger menu if navigation is turned on.
The site header appears as a horizontal header at the top of the page on mobile devices and when navigation is turned off. When navigation is turned on in Publish settings, the site name and logo appear in the left sidebar.
This page lists CSS variables used for Obsidian Publish site header, site logo, and site name
CSS variables
Publish-specific variables should be defined on the .published-container.
| Variable | Description |
|---|---|
--logo-width | Logo default width |
--logo-height | Logo default height |
--logo-max-width | Logo max width |
--logo-max-height | Logo max height |
--logo-radius | Logo corner radius |
--header-height | Height of the site header |
--site-name-color | Site name color |
--site-name-color-hover | Site name hovered color |
--site-name-font | Site name font family |
--site-name-size | Site name font size |
--site-name-weight | Site name font weight |
--site-menu-icon-color | Mobile menu icon color |
--site-menu-icon-color-hover | Mobile menu hovered icon color |
--site-menu-icon-size | Mobile menu icon size |