Content shifting in header on custom Capybara integration

While refreshing the page the header behaves odd and i can’t figure out why at this moment.
It’s a Capybara theme integration with customized header. I have overridden the css vars for the searchbar for example on element level. After all content is loaded the searchbar takes in the width as expected. But while the page is loading, it looks like the capybara default width of the search bar is applied. It’s very odd as i can’t figure out what exactly is happening. Already tried to override the css var in the custom theme css rather then in the component. But that had not the desired effect, while the page is loading the default Capybara css vars seems to be applied.

Anybody has a clue what this could be?

alright, i investigated it and it’s plain css hierarchy issue in this case.

For future reference or people who stumble upon this:

If you want to override a css variable that is declared in a capybara component file, use css hierarchy to override the css variable. This way you won’t get the scenario where shortly the default capybara css var is applied and moments later your own integration css vars.

So not:

.sf-search-bar {
    @include for-desktop {
      --search-bar-width: 100%;
    }
  }

but rather:

.o-search {
  .sf-search-bar {
    @include for-desktop {
      --search-bar-width: 100%;
    }
  }
}
1 Like