[Resolved] Mobile header, long site title and alignment

[Steve]

I would like the mobile header nav and search to always appear to the right. It pushes to the next line eventually on smaller screens.

I have tried a few css breakpoints to change the font size of the title but it’s a bit clunky.

– Is Mobile header the best way to achieve this?

– Is there a way to do this that progressively shrink the site title to accomodate fitting it next to the mobile nav (and ideally search), depending on the actual width of the screen?

– Maybe the words could break to a new line and then the mobile nav is vertically centered to the right of it. Not sure best method to achieve that.

Actual
https://imgur.com/a/RlFlXiQ

What I’d like (works for medium width screens currently)
https://imgur.com/hXG1ARG

Thanks!

[David]

Hi there,

do you have that mocked up on a site i can see ?

[Steve]

Attaching to this reply, thanks!

[David]

Try adding this CSS:

.navigation-branding .main-title a {
        line-height: 1;
}
.navigation-branding {
    max-width: calc(100% - 150px);

}

[Steve]

Thank you, it worked! 🙂

[David]

Glad to hear that

[Author]

Posts