How do I show logo and site title in the header?

Hello, 
I am looking for help with the design of my header. In the picture you can see my current header (the top) and then how I would like my header to look like (the bottom). So I am looking for a way to show the Logo and Site title, so that when you click on any of them you get redirected to the home page. I would also like the language flag from Weglot to be above the log in and basket. Is there any way to do this? Either with a custom css code or another work around. At the moment I have just uploaded the logo and my business name as one picture.
Any help is greatly appreciated.  

Kind Regards 
Kate

Can you share your website URL?

Upload the logo (without the name), then set the header style to have the navigation in the center and the logo on the left. Then we can add the company name above the navigation with a little code. 

Thank you so much Ziggy for you help. My URL is https://www.katesdesigncottage.com/

I have changed the header like you suggested, now the site navigation is no longer in one line though? Is there a code for that too please? 
 

Wow thank you so much, it looks way better. Do you know how to get the Weglot flag to be above the login/basket? 🙂

Yes, that looks great! 

Could you mark my post as the solution and give it a like? Thanks!

You can try this, but it stacks the 3 items on the right.

.header-actions {
    display: inline-flex;
    align-items: flex-end;
}
.header-actions--right .customerAccountLoginDesktop {
    order: 2;
}
.header-actions .language-picker-desktop {
    order: 1;
}
.header-actions-action .header-actions-action--cart {
    order: 3;
}

Yes of course, I have now marked your answer as the solution. Sadly the code you gave me for the Weglot flag dosen't work. It just swaps the placement of Login and the basket? You can see it on the website. 

I was missing a line, try this:

.header-actions {
  display: inline-flex;
  align-items: flex-end;
  flex-direction: column;
}
.header-actions--right .customerAccountLoginDesktop {
  order: 2;
}
.header-actions .language-picker-desktop {
  order: 0;
}
.header-actions-action .header-actions-action--cart {
  order: 3;
}

Thank you so much for your help, is there anyway to make login and basket be on the same line? If not how can I make the basket be at the bottom? I tried to play around with the code, but I couldn't work it out. 

Try this:

.header-actions {
  display: inline-flex;
  align-items: flex-end;
  flex-direction: column;
}
.header-actions--right .customerAccountLoginDesktop {
  order: 0;
}
.header-actions .language-picker-desktop {
  order: -2;
}
.header-actions-action .header-actions-action--cart {
  order: 3;
}

It works! Thank you so much for your help 😄 

5 minutes ago, KatesDesignCottage said:

It works! Thank you so much for your help 😄 

Happy to help!

I followed your advice, and it solved my problem. Thank you so much!

@Ziggy I've been trying to replicate your above code, combined with one I found online, and I can't quite get it right - I'm hoping you won't mind helping me out?

Website is: https://clementine-leopard-se77.squarespace.com/

I want the words "Pride Hamilton" and the PH logo (at the top left of the page) to be on the same line - if that makes sense.  Right now, "Pride Hamilton" is below the logo, and I want them side-by-side on the same line, but no matter what I do, I can't get it to work.

This is the code I used:
// header title
.header-title-logo a:after {
    content: "Pride Hamilton";
    font-size: 44px;
    font-family: Anton;
    color: #E8E1FD;
    text-transform: uppercase;
    vertical-align: middle;
    font-weight: 400;
    padding-left: 110px;
}
.header-title-logo img {
    vertical-align: middle;
}

13 hours ago, BearChrisK said:

@Ziggy I've been trying to replicate your above code, combined with one I found online, and I can't quite get it right - I'm hoping you won't mind helping me out?

Use this CSS instead:

.header-title-logo:after {
    content: "Pride Hamilton";
    font-size: 44px;
    font-family: Anton;
    color: #e8e1fd;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    padding-left: 20px;
}
.header-title-logo {
    display: flex;
    align-items: center;
}

@Ziggy you are AMAZING!  Oh my gosh, thank you SO much - that worked!  Comparing your code side-by-side to what I previously had, I can see what the changes were and they make sense to me now - - thanks for helping me out, I really appreciate it!

33 minutes ago, BearChrisK said:

thanks for helping me out, I really appreciate it!

Happy to help! Thanks for the like!