Remove black line from GTK4 HeaderBar using CSS

[MustagheesButt]

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:

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

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

[dboles]

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

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

[MustagheesButt]

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

[dboles]

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

[rdbende]

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

[dboles]

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.

[mazharhussain]

@dboles

For me in gtk4-widget-factory, adding headerbar.flat does nothing.

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.

@dboles

is it documented

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.

[dboles]

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.