Logo moves to right on Tablet and Mobile

Hi there,

you could try this:

@media (max-width: 768px) {
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .site-logo {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        margin-right: 10px;
    }
    .main-navigation {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }
}

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

No problem, lets give this a shot:

@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;
    }
}

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

It sounds like its conflicting with the other CSS, if you can add back the latest code and i will provide a fix.

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.

Yes, if you could add the code here: https://generatepress.com/forums/topic/logo-moves-to-right-on-tablet-and-mobile/#post-658954 then i can have a look :)

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

I wonder if something like this would work?:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .inside-header .site-branding,
    .inside-header .site-logo {
        flex: 0 0 auto;
    }

    .inside-header .main-navigation {
        width: 100%;
        order: 3;
    }

    .inside-header .site-logo {
        order: 1;
        margin-right: 20px;
    }

    .inside-header .site-branding {
        order: 2;
    }
}

If you need broader browser support, you can run the above code through this tool: https://autoprefixer.github.io/

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 there,

Did you add the CSS above? I'm not seeing it on your site.

I'm seeing the logo on the left all the way down until 768px, at which point my code would take effect.

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

Ah, got it. I'd need to see the issue on your site to see why the logo wasn't working on tablet.

When I add it in developer tools, I can't reproduce that issue.

You can try replacing 768px in my code to 1024px.

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