Sydney Header not responsive on mobile

Hi,

I am developing website using Sydney theme. On the website header I have site icon, site title and menus. When I open my website on mobile smartphone, the header is not responsive. Site icon is displayed at the top left, then below site title and below it menu icon is displayed. All three should be displayed in one line.

Below is the image:

image1

Hello,

Can you please provide a link to your website?

All three should be displayed in one line.

Do you want to display it vertically or horizontally?

Kind Regards, Roman.

Ok. Website: www.integrity-foundation.com. Want to display it horizontally.

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media only screen and (max-width: 767px) {
    header#masthead div.col-md-5.col-sm-8.col-xs-12 {
        max-width: 72%;
        margin-top: 32px;
        padding: 0 5px;
    }
	
    header#masthead div.col-md-5.col-sm-8.col-xs-12,
    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        width: auto;
    }

    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        float: right;
        padding: 2px 5px 2px 0;
    }

    header#masthead nav#mainnav-mobi {
        left: -194px;
        width: 250px;
    }

    .site-title {
        font-size: 20px !important;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thanks, It is working good.

Great, you are welcome!

Kind Regards, Roman.