How to reduce the height of headerbar (titlebar) of GTK3 apps using CSD?

Question

The height of title bar in GNOME is really wide. Is there a way to make it narrow without installing any extension or theme? Title bar of File manager and Terminal is wide and looks ugly. I love how narrow the title bar of Unity on Ubuntu was. I'm on Ubuntu 20.04 GNOME: 3.36.8

Answer 1

Surprisingly, this common question apparently was never posted here before - I searched a duplicate in vain.

Gnome does not expose detailed tweaking of the appearance to the users. It does not even expose changing a theme - you need to install Gnome Tweaks for that.

The easiest option to change the height of a title bar is to change to a appropriate theme. This, however, is an all-or-nothing approach. You have to take the entire theme as is.

You probably better of with some manual coding. Create a file ~/.config/gtk-3.0/gtk.css and enter or adapt the following css code:

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 0px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 0px;
}
headerbar {
    min-height: 24px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions /
    padding-right: 2px;
    margin: 0px; / same as headerbar side padding for nicer proportions */
    padding: 0px;
}

Log out and then back in for the changes to take effect (or reset Gnome Shell with Alt+F2, r when on Xorg).

^{Foliate Ebook reader before changing gtk.css}

^{Foliate Ebook reader after changing gtk.css}