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

Solution 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).

enter image description here