Archived topic
Mobile header, long site title and alignment
5 replies · Started by Steve on January 20, 2023
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!
Hi there,
do you have that mocked up on a site i can see ?
Attaching to this reply, thanks!
Try adding this CSS:
.navigation-branding .main-title a {
line-height: 1;
}
.navigation-branding {
max-width: calc(100% - 150px);
}
Thank you, it worked! :)
Glad to hear that