Remove black line from GTK4 HeaderBar using CSS

I’ve applied these yellow backgrounds to clearly show the straight black line. Otherwise the background is supposed to be transparent and I need to remove this line.

But I cant figure out if it’s a border or a shadow or an outline, I’ve tried everything I could but it just doesn’t disappears. And I also cant figure out which subnode/widget of HeaderBar is adding it.

I’ve tried both GtkHeaderBar and AdwHeaderBar, both have this line. My UI looks something like this:

  <requires lib="gtk" version="4.10"/>
  <requires lib="libadwaita" version="1.3"/>
  <object class="AdwApplicationWindow" id="main_window">
      <object class="GtkOverlay">
          <object class="AdwViewStack" id="stk1">
            <property name="css-classes">stack</property>
              <object class="AdwViewStackPage" id="page-login">...</object>
        <child type="overlay">
          <object class="AdwHeaderBar">
            <property name="css-classes">header-bar</property>
            <property name="valign">start</property>

This line does react to change in system theme mode (darker in dark mode), dont know if that helps.

With gtk4-widget-factory and adding headerbar { border: none; } in the Inspector, I immediately see no border. So I’m not convinced GtkHeaderBar exhibits this.

Note also that you don’t need to add CSS classes like .header-bar when widgets usually have sensible CSS node names already, like headerbar.

…although even if using the node name, you may find yourself needing to add extra selectors to ensure your styles override those in the GTK theme. I’m afraid that’s just CSS for us :smile_cat:

Is it perhaps a GtkSeparator, CSS name separator, affected by background-color? I have no idea what libadwaita does though.

Thanks for the quick reply. I did not about this gtk4-widget-factory tool. I just tried with it, and it is indeed as you say.

However for my app, it still did not work. The line was still there, even with * {border: none;}. In some desperate attempts I tried box-shadow: none once again (i had tried it several times before) and it worked (for both adwaita and gtk)! Interestingly it does nothing in gtk4-widget-factory

I guess my unnecessary CSS classes usage comes from me being mostly a web developer xD

Thanks again

1 Like

Oh, good point, box-shadow may come into play, depends I guess on the exact layout of your widgets, theme in use, etc.

1 Like

You can simply just add the built-in flat css class to the header bar.

Can you? For me in gtk4-widget-factory, adding headerbar.flat does nothing. Where does it work for you? And is it documented as doing so? Otherwise it’s not reliable.

Generally, if a widget supports a ‘flat’ mode, it will have a specific implementation of the .flat class in the theme CSS, and some API that maps to that, e.g. GtkButton.set_has_frame(). GtkHeaderBar looks to have neither of those things, nor to mention .flat at all. Thus I would say if it happens to work for you, it’s not required to for anyone else.

As the name implies, gtk4-widget-factory is not a LibAdwaita app. flat CSS class is a LibAdwaita feature. So, only LibAdwaita apps can benefit from it.

Yes, see Adw – 1: Style Classes.

Note: In the upcoming 1.4 release of LibAdwaita, flat style class will be deprecated in favor of Adw.ToolbarView.

1 Like

As the name implies, gtk4-widget-factory is not a LibAdwaita app.

I am well aware of that, thanks. But OP was not talking only about libadwaita. So, my post was in reply to rdbende, seeking clarification of where and why that worked. Thanks for providing it for them.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.