[Resolved] Logo moves to right on Tablet and Mobile

Thank you David, but I apologize as I misspoke before on what I want to achieve. Sorry for wasting your time!

I want the logo to be on the left on Desktop (as it is now) and the same on tablets if possible, or, above the title in the center.

For mobile, I would like the logo to be above the site title in the center. Sorry for the hassle.

Regards,
Charles

Thank you David for your efforts.
Unfortunately, this places the logo to the right of the site title, not the left.
Do I need to consider using Elementor to create a header?
Regards,
Charles

Not sure what you mean by add back, unless you mean to try again? I did though. and also removed the only other CSS I had which was a border below the header; didn’t make any difference.
The logo still floats to the right of the title and doesn’t line up.

Thanks in advance if there is a fix.

If it’s the one you suggested last it’s this –

@media (max-width: 1024px) {
.inside-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.site-logo {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}

@media (max-width: 1024px) and (min-width: 769px) {
.insider-header {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}

If it’s the original that partly works, it’s this –
media (min-width:769px) {
.site-branding {
display: inline-block;
}

.site-logo {
float: left;
margin-right: 20px;
}
}

@media (min-width:769px) {
.main-title {
margin-top: 20px;
}
}

.site-header {
border-bottom: 1px solid #c0c0c0;
}

Thanks, David

Thank you, Tom

Desktop and tablet place the logo on different sides. (mobile fine though).
Desktop shows it right of the title, Tablet shows it left of the title, which is what I am looking for.
Can desktop show it left of the title too?

If not, I will drop the nav menu below logo and title, which looks okay and perfect for tablet & mobile.

Thank you kindly for your assistance, love the theme!
Charles

Hi Tom

I did but removed it after it was displaying the logo in the wrong position: to the right of the site title.
So I resorted to putting back the original CSS which displays correctly all but for tablet, placing the logo incorrectly to the right of the site title.

Orig CSS-

@media (min-width:769px) {
.site-branding {
display: inline-block;
}

.site-logo {
float: left;
margin-right: 20px;
}
}

@media (min-width:769px) {
.main-title {
margin-top: 18px;
}
}

I appreciate your help but for now, I think I will drop the Nav menu below the Site title & logo so as to display tablet correctly. If there’s a fix fine, otherwise I’ll make this move permanent.
Thanks again,
Charles

Hi Tom,

Thanks but that didn’t work either. Going to mark this as solved as I’ve decided to drop the menu below header.
It also allows for all my categories so it’s fine.

Thanks again,
Charles