header with navigation

Hi there,

Remove this CSS:

/* make the logo on top keft side */
@media (max-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
    }

    nav#site-navigation {
        order: -1;
    }
	.main-navigation .menu-toggle {
        text-align: left;
    }
	
}

And add this CSS:

@media(max-width: 768px) {
    .site-header .site-branding-container {
        flex-direction: unset;
    }
    .site-header .site-branding-container .site-logo {
        margin-right: 20px;
    }
    .main-navigation .inside-navigation {
        position: static;
    }
    .main-navigation .menu-toggle {
        position: absolute;
        top: 20px;
        left: 10px;
        z-index: 1000;
    }
}

The logo is on the menu in mobile

Add this CSS to adjust the size and position on really small screens:

@media(max-width: 500px) {
    .site-header .site-branding-container .site-logo {
        margin-right: 10px !important;

    }
    .site-header .site-branding-container .site-logo img {
        max-width: 40px;
    }
    .site-header .site-branding-container .main-title {
        font-size: 13px;
    }
    .main-navigation .menu-toggle {
        top: 5px !important;
    }
}

it worked.
now the sticky navigation doesn't work.

Are you able to create a logo that container the logo image and the text ?
As it would save a lot of CSS as you can just add it as the Mobile Header Logo ?

do you know what dimensions I need?

I need to tell the designer the dimensions.
do you know what i need?

i would suggest no larger than 60px x 240px

the width should be smaller then the height?

No sorry i should have said 60px height, 240px wide.

Ok I have the logo.
now to use header as navigation and add the new logo?

Leave your current header as is.
But in Customizer > Layout > Header, enable the Mobile Header, and there you will be given a field to add your mobile header logo. Add your new logo to that.

Let me know once thats done.

Done.
look like the logo is too small.

See here:

https://www.screencast.com/t/yzlqH2dCw4a

The image uploaded is square 960px x 960px with a lot of negative space around it.
Can the original be cropped to its size, as highlighted by the green border i added ? And then re-uploaded.