[Resolved] Centred Mobile Site Title, Hamburger Left & Search Right

[Sean]

I have tried searching through similar forum posts but haven’t quite found the solution I am looking for.

I want the Site Title to be centred on mobile and to have the hamburger on the left with search/cart icons on the right. I have shown how I would like this in an example image at the bottom, using logo as the branding to demonstrate what I want it to look like (but using title instead of logo).
As you can see I am using navigation as the header and have turned on the mobile header. Unfortunately when I set the branding to site title this left aligns it and puts hamburger/search/cart on the right but I can’t see a way to adjust these so suspect I need to use custom CSS?

[Sean]

Not sure the image has worked, second try:

[David]

Hi there,

try adding this CSS:

@media (max-width: 768px) {
    .navigation-branding {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translatex(-50%);
    }

    #mobile-header .menu-toggle {
        order: -1;
        margin-right: auto;
    }
}

[Sean]

That has done the trick! As usual thanks for the excellent support

[David]

You’re welcome

[Author]

Posts