Style the studio by over-riding custom variables

Featured topic

2 replies

Last updated: Feb 4, 2021

👋 Hey all - hoping this is fairly simple ask but it has me confused. I'm working on customising the studio i've put in my logo and adjusted the colours etc.. - The logo size is pushing the navbar container height up (and i'd like to keep the logo at this set size as it looks best) I just want to align the other navbar items (buttons, search etc...) into the middle of the container using align-items: center. It's not obvious how i'd be able to do or override these styles? Help!

Feb 4, 2021, 11:27 AM

you can add custom styles (https://www.sanity.io/docs/styling#overriding-variables-d7f9b5cc2adb ), maybe something like this?

:global([class*="Navbar_root_"]) {
  align-items: center;
}

Feb 4, 2021, 11:48 AM

🙌 thanks

user B

Feb 4, 2021, 11:49 AM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.