Theme development

I activated the Olivero theme on Drupal 9.

I added the following code to my stylesheet to pin the navigation bar in mobile mode :

.site-header {
    z-index: 111;
    position: sticky;
    top: 0;
}

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

Now I want to show a shadow below the navigation bar, when it is in mobile mode. I want the shadow to appear only when the user scrolls down the page. If down 1 pixel, the shadow should appear.

On Drupal 9, I have the Olivero theme. When the navigation switches to mobile mode, you have to go to the + button opposite the menu to display the sub-menu. It's not intuitive, because the user has to perform an additional action. I would like to unfold the main menu when the navigation switches to mobile mode.

https://www.drupal.org/files/issues/2022-06-07/Screenshot_20220606-17234...

I'm new to theme development
I don't like the default form design. How can we customize the style of node/add form for the user?

https://photos.app.goo.gl/5Eav9fk8y4cz2hNa8

I'm new to theme development
I don't like the default form design. How can we customize the style of node/add form for the user?

Hi everyone, 

I was wondering how can I change font and color of my theme for all the website in once? 

Should I change it for each component or is there a way that allows me to change it for the whole website? 

NB: Drupal 9.3.13

thank you 

For a new site I wanted to start clean and subtheme the new Claro. Now how do I make it responsive. From the Claro wiki page I read this:

responsive: give emphasis to what matters; use hierarchy to explain the relation between elements; use predictable patterns; elements adapt and react to inputs.