Header Navigation: Breakpoint setting display:none to nav

[FBachini]

The Header Navigation disappears after the lg breakpoint, as can be reproduced in the Storybook. I am attaching a recording about it:

Screen.Recording.2025-09-11.at.6.02.01.PM.mov

This is hiding important elements in the header, and my guess is in the usage of ::before and @includes in the same class. This combination can break the pseudo-element usage, setting the default behavior of display: none as noted here.

//--------------------------------------------------------------------------
  // Header - Navigation
  //--------------------------------------------------------------------------
  .#{$prefix}--header__nav {
    position: relative;
    display: none;
    block-size: 100%;
    padding-inline-start: mini-units(2);

    @include breakpoint('lg') {
      display: block;
    }

    // header nav divider
    &::before {
      position: absolute;
      display: block;
      background-color: $border-subtle;
      block-size: convert.to-rem(24px);
      content: '';
      inline-size: convert.to-rem(1px);
      inset-block-start: 50%;
      inset-inline-start: 0;
      transform: translateY(-50%);
    }
  }

As a workaround, I am using the !important hack:

.cds--header__nav {
  display: block !important;

  &::before {
    display: block !important;
  }
}