50

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;
}
4
  • fwiw this is a gtk thing not a gnome/nautilus/wm one Apr 19, 2016 at 16:25
  • 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!
    – SimonG
    Apr 24, 2016 at 16:13
  • 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. Apr 24, 2016 at 22:55
  • @Mongrel please read this: meta.stackexchange.com/questions/283468/… Aug 16, 2016 at 15:11

6 Answers 6

35
  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;
  }
4
  • 9
    The alt+f2 then r tip is amazing; thank you!
    – berto
    Jul 18, 2017 at 12:45
  • 2
    note that Alt+F2 does not work with a Wayland session Feb 27, 2018 at 12:17
  • 1
    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;
    – michaelmoo
    Jan 11, 2019 at 18:29
  • Does not work on apps using libhandy. Aug 20, 2021 at 13:20
20

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);
}
5
  • Are all these suggested changes made in "~/.config/gtk-3.0/gtk.css" or where exactly? Jul 11, 2017 at 9:02
  • @ezra-s Yes, any of the above sections would be added to ~/.config/gtk-3.0/gtk.css Jul 11, 2017 at 21:45
  • 1
    does this work on gtk4? Jul 5, 2022 at 3:10
  • Note that there is a limit to how low you can squeeze the height of CSD Header Bars that are implemented with GTKHeaderBar (or a descendant thereof) if they left the default TRUE value of the has-subtitle GTK property alone. In that case, GTKHeaderBar reserves vertical space for two lines of text in some system font, even if there is no subtitle and the actual font that is being used in the title is smaller. And note there is no way to modify the has-subtitle property of a GTKHeaderBar from gtk CSS :-(. Hence in this case, a source code change is needed to squeeze out the excess height. Oct 7, 2022 at 20:38
  • (Well, you can run the application under the GTK interactive browser debugger -- e.g., by running it with the GTK_DEBUG environment variable set to interactive -- and then navigate the GTK object tree to the GTKHeaderBar you want to shrink and then manually modify its has-subtitle property to FALSE. But that is a real pain to do on every invocation.) Oct 7, 2022 at 20:41
5

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;
}
2
  • This worked for me on Ubuntu 20.04.2 LTS May 5, 2021 at 16:50
  • 2
    What is the equivalent of this for gtk4 applications like Nautilus under 22.10? I tried to put a similar file under ~/.config/gtk-4.0, but it didn't work.
    – FedKad
    Mar 8, 2023 at 11:23
2

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.

2

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

I modified the usr/share/themes/name-of-the-theme/gnome-shell/gnome-shell.css file.

We have to find

 /* Panel */

   #panel {
   background-gradient-direction:none;
   background-color: rgba(0,0,0,0.5);
   /* border: 0px solid rgba(90,105,111,0.5);
   box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15);*/
   border: 1px solid rgba(90,105,111,0.5);
   box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
   border-top:0px;border-right:0px;border-left:0px;
   font-weight: bold;
   height: 24px;

We have to change the " height " value. Afterwards we have to reload the theme. I use the extension " activities configurator " for the other parameters of the topbar.

1
  • This file is not meant to be edited and will be reset after updating the theme.
    – knoftrix
    Apr 10, 2020 at 12:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .