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

Question

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

Solution 1

Note: If you are on PopOS, there is an option to "Remove Window Titles" in the top bar menu that also controls tiling. This is what I use currently myself and it works great for only removing the superfluous non-CSD titlebars.

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

Solution 2

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

Solution 3

Update your ~/.config/gtk-3.0/gtk.css with following content:

/* shrink headerbars (don't forget semicolons after each property) */
headerbar {
    min-height: 0px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
    background-color: #2d2d2d;
}

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

/* shrink ssd titlebars */
.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */
    padding: 0px;
    background-color: #2d2d2d;
}

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

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

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

Solution 4

Tangent to the subject, you can download the maximums shell extension to hide the title bar on maximized windows. Quite the useful usecase.

Not compatible with wayland as far as I know, but didn't test it.

Solution 5

On my Ubuntu 20.04 I use this custom theme fix (Gnome 3.20 on Yaru Standard Theme) and works well.

headerbar.default-decoration {
    min-height: 18px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
}

headerbar.default-decoration button.titlebutton {
    min-height: 16px;
    min-width: 16px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
}


headerbar  {
    min-height: 18px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
}


headerbar entry, headerbar spinbutton, headerbar button, headerbar switch, headerbar separator {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}


headerbar button.titlebutton.minimize, headerbar button.titlebutton.maximize, headerbar button.titlebutton.close {
    min-height: 16px;
    min-width: 16px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
}

View more solutions

Comments

[Admin]

fwiw this is a gtk thing not a gnome/nautilus/wm one

[Admin]

The solution in your update worked great for me on Arch with Gnome 3.20. Had to adjust the values a bit, and it doesn't extend to GTK3 CSDs, but those are insane anyway. Thanks!

[Admin]

Glad it is useful! I posted a few comments regarding the CSDs/headerbars in my answer below, try it out and see if it helps.

[Admin]

@Mongrel please read this: meta.stackexchange.com/questions/283468/…

[ezra-s]

Are all these suggested changes made in "~/.config/gtk-3.0/gtk.css" or where exactly?

[berto]

The alt+f2 then r tip is amazing; thank you!

[Frederick Nord]

note that Alt+F2 does not work with a Wayland session

[michaelmoo]

You can shrink it a little more by adding min-height: 10px; in the headerbar entry etc section, and change min-height: 24px; in headerbar to 16px;

[knoftrix]

This file is not meant to be edited and will be reset after updating the theme.

[Rémy Hosseinkhan Boucher]

This worked for me on Ubuntu 20.04.2 LTS

[Archisman Panigrahi]

Does not work on apps using libhandy.

[Admin]

does this work on gtk4?