docs/obsidian-developer/Reference/CSS variables/Publish/Site header.md

metadata

cssClass: reference

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