Header size big and menu icon not displayed properly on android mobile in sydney theme

Hello,
I am using sydney theme for our development.

When I open the website on my android phone, the header of the website appears large and the menu icon is not in order, meaning the menu icon appears below the logo and site title.

Website URL: www.integrity-foundation.com
I have attached the screenshot of website viewed from android phone.

How to resolve this?

Hi,

Thank you for contacting us about our theme Sydney. I am happy to help with your queries.

I’d like to check your website directly to get to know the root of the problem. But my web browser can’t open it and displays an error message.

Can you please fix it first, and update me here when you have done it?

Regards,
Kharis
aThemes Support

I have resolved the issue. Now you can check the website.

Hi,

Thank you for getting back.

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

    @media only screen and (max-width: 767px) {
      .site-header .container {
        position: relative;
      }
      .site-header .btn-menu {
        position: absolute;
        top: 12px;
        right: 15px;
      }
      .site-header .col-md-8 {
        position: static;
      }
      header#masthead.site-header nav#mainnav-mobi {
        left: 0;
        width: 100%;
      }
    }

Regards,
Kharis
aThemes Support

I am trying to add the code in Additional CSS. But when I publish I have following error as Looks like something’s gone wrong. Wait a couple seconds, and then try again.

Hi, The issue is resolved. The menu icon appears properly in one line. But can you tell how can I move the site title little towards site icon.

I have attached the photo.