You’re adding styles that you really don’t need to. By default your theme should already take care of this but you have some added heights of zero and too many styles on this.

View post on imgur.com

I’d take these out, anything you’ve done to get this to work right. Make sure that you are using a media query targeted at mobile devices. Like so

@media screen and (max-width:786px){
  #kad-mobile-banner-sticky-wrapper  {  /*example selector*/
    height:80px !important;   /*example if height is needed*/
    padding:1em 0em !important;  /*example if padding is need*/
   
 }
}

Let me know what’s wrong with the default look and I’ll help you get it straightened out the correct way.

Firstly, I’ll apologise as technically we’re not skilled with the site. I’m not aware how we have added heights of zero, we’ve just edited the header with the options on the appearance customisation editor.

Where do we enter in the script you’ve sent, on the theme editor? Thanks for your patience.

They appear to be either set dynamically in the theme or in additional css which can be found by going to appearance > customize > additional css

The only addition CSS I have added for layout is one line suggested by Kadence themes to automatically adjust the header height. Shall I take it out?

As far as I can see there are some additional styles attached to that header that are conflicting with whatever the developer of the theme had. They appear to be either in settings of the theme or in additional css which is inside the customizer. Everything really for the theme is inside Customizer. Here’s some more information on how to use and where to look for things in Customizer

Lastly, that logo is just taking up a lot of real estate. For mobile I would, in my professional opinion, use a completely different logo or just the name in regular text and that rad logo with knife and fork