How to change the titlebar height in standard GTK apps and those with headerbars/CSDs on Gnome 3.20

1. create a file ~/.config/gtk-3.0/gtk.css ( add the below CSS )
2. then you will need to reload gnome-shell: ALT + F2 and type r

I was able to reduce the app Titlebar on Gnome 3.20 with the following CSS:

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;
  }

Headerbar/CSD

Actually, a section of the code that I found via reddit and posted above, namely

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 2px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 2px;
}

DOES modify the headerbars/CSDs. However the effect is not immediate. Even if you reload gnome, you might need to close all windows, wait a while, or log out and log back in again to see the effect.

I am still not seeing any difference in the header bar when modifying the following.

headerbar {
    min-height: 38px;
    padding-left: 2px; /* same as children's vertical margins for nicer proportions */
    padding-right: 2px;
}

Standard titlebar

The two sections for the normal window titlebars work as expected.

.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */
    padding: 2px
}

.default-decoration .titlebutton {
    min-height: 26px; /* tweak these two props to reduce button size */
    min-width: 26px;
}

Titlebar border

You can use the following to remove the titlebar border if you are running the default adwaita theme. From https://bbs.archlinux.org/viewtopic.php?id=211102

window.ssd headerbar.titlebar {
  border: none;
  background-image: linear-gradient(to bottom,
  shade(@theme_bg_color, 1.05),
  shade(@theme_bg_color, 0.99));
  box-shadow: inset 0 1px shade(@theme_bg_color, 1.4);
}