How to apply a CSS style on mobile navigation?

Question

I have the Olivero theme on Drupal 9 (it's the default theme) :

https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboatqa.com/

The following code allows you to apply a CSS style if the navigation is not in mobile mode. How to apply a CSS style on mobile navigation ?

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-header {
    position: relative;
  }
}

Answer 1

Try the below code for mobile responsive

@media (min-width: 37.5rem) {
// example style
body:not(.is-always-mobile-nav) .site-header {
    position: relative;
  }
    
}