Mobile view: Header too big and it is not the custom image that the client wants

Good day

My client wants the header on the mobile to be the same image as the desktop view. i have triec the custom css code below. It did not work. Also the header and menu is huge and would like make this smaller. please screenshot

screenshot mobile view.PNG

Please assist urgently

    @media screen and (max-width:900px) {
    	.custom-header {
    	 	background-image:url("https://drnmmoola.co.za/wp-content/uploads/2020/10/cropped-Header.jpg") !important;
    	}
    }

Hi,

I’d like to check it directly. But seems likely the link you’ve shared is currently under maintenance mode.

Can you let me know whether you have set a fixed header height from Customize > Haeder area > Header Media > Hader height?

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width:767px){
            
      .header-wrap .container{
        text-align: left;
      }

      .header-wrap .btn-menu{
        float: right;
        margin-right: 15px;
      }  

      .header-wrap .col-md-4 {
        max-width: 90%;
        position: relative;
        z-index: 2;
      }

      .header-wrap .col-md-8 {
        margin-top: -50px;       
      }        

      #mainnav-mobi {
        top: 70px;
      }
      
    }

Regards,
Kharis
aThemes Support

Thank you. This did work

In terms of the custom image for this header area for mobile view? How do I enable this? I did use the custom css code as mentioned but it did not work. I can’t have it off maintanence mode at the moment. Isnthere any other way you could help resolve this issue

Warm regards,

Please share a temporary access to your website’s admin area, that you can generate with this plugin. Link it prvately over direct message for security reason.

Before generating the link, ensure all admin rights are enabled and the expiry is set to 7 days.

Regards,
Kharis
aThemes Support