Gnome3 – How to Change Titlebar Height in GTK Apps

gnome3mutternautiluswindow-manager

In Gnome 3.18, it was possible to change the titlebar height of all windows by changing the css in ~/.config/gtk-3.0/gtk.css as per Reduce title bar height in gnome 3 / gtk+ 3.

.header-bar.default-decoration {
        padding-top: 0px;
        padding-bottom: 0px;
    }

.header-bar.default-decoration .button.titlebutton {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* No line below the title bar */
.ssd .titlebar {
    border-width: 0;
    box-shadow: none;
}

In Gnome 3.20, this appears to no longer apply to windows with a headerbar/CSD (gnome-specific buttons in the title bar), such as Nautilus (Files), Settings, Photos, Contacts, etc. The tweak still reduces the titlebar height for other applications, such as gnome-terminal and gVim. How do I reduce the height of the titlebar in gnome-programs such as Nautilus in Gnome 3.20?


Update

I have also tried what is suggested in this reddit thread. I tried both window.ssd and .ssd only, no dice. This works, see the answer I posted for more details

window.ssd headerbar.titlebar {
    padding-top: 1px;
    padding-bottom: 1px;
    min-height: 0;
}

window.ssd headerbar.titlebar button.titlebutton {
    padding-top: 1px;
    padding-bottom: 1px;
    min-height: 0;
}

and

/* shrink headebars */
headerbar {
    min-height: 38px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
}

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

/* shrink ssd titlebars */
.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;
}

Best Answer

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