Adjust site title, logo and menu

Hi. I have looked across a few discussions on similar topics but am unable to successfully customise my site header.

Two issues:

1) Desktop: At the moment the site title is too low in the header section. I would like to align the elements in one line, with equal padding above and below. I would like them in this order: logo (far left), site title (mid-left), menu (mid-right) and language/social links (far right).

2) Mobile: I would like to 1) increase the size of the logo 2) reduce the size of the site title and 3) reduce the padding above the site title

Thanks very much for your help

Child of the Earth CIC

Website: https://www.childoftheearth.co.uk/

@Ziggy thank you for your qick and super helpful response 🙂

It looks like the desktop view is sorted.

RE mobile view. How can i reduce the site title text size and increase the logo size please?

14 minutes ago, COTE2023 said:

thank you for your qick and super helpful response 🙂

No problem! Can you mark my answer as the solution to your post?

For the mobile view try this:

@media only screen and (max-width:767px) {
  .header-title-logo:after {
    font-size: 6vw !important;
  }
}

perfect thanks so much! 

@Ziggy what would i need to move the menu items to a horizontal row underneath the site title, aligned with the left hand edge of the site title?

And I'll buy you a coffee!

Try this:

.header-title-nav-wrapper {
    flex-wrap: wrap;
}
.header-layout-nav-right .header-nav {
    text-align: left;
    padding-left: 0vw;
    margin-top:8px;
}

thanks.

I've added that in and changed the padding to 10vw so the menu items are aligned with the site title.

I would now like to reduce the space between the menu items and the site title slightly and increase the logo size so it is aligned with the top of the site title and the bottom of the menu items. I hope that makes sense?

I bought you a coffee 😀

I've adjusted the code here:

.header-title-nav-wrapper {
    flex-wrap: wrap;
}
.header-title-logo {
    align-items: flex-start;
}
.header-layout-nav-right .header-nav {
    text-align: left;
    padding-left: 140px;
    margin-top:-30px;
    width: 60%;
}

If you want the logo larger you can do that in the Header Settings, but you'll need to adjust the margin-top property and the padding-left.

...and thanks for the coffee!

That's perfect, thank you again