Add tagline to center of header section while using design layout with logo to the left and navigation/cta to the right

Unfortunately I cannot share a link to the website as it is strictly under NDA, but I am wondering if anybody can assist?

I've had a look at other threads that tend to position taglines after the logo/title or after/before the navigation or call to action. However these always end up positioning the tagline directly underneath or above these options.

I am looking to position the tagline in the center, avoiding overlaps with the navigation when the window is reduced in size.

I've attached an example to help visualise.

I would also like to position the Navigation (I only have one option, styled to look identical to the CTA button) above the CTA button so that it perfectly lines up and both are vertically centered.

See attached example:

It would be better to remove the CTA and put two links into the navigation. Those can then be styled and stacked.

How do you want to add the tagline, assuming you're happy with CSS?

This will stack the navigation:

.header-nav-list {
  flex-direction: column;
  row-gap: 4px;
}

This will start you off with styling the navigation links:

.header-layout-nav-center .header-nav .header-nav-item {
  border: 2px solid black;
  background-color: black;
  transition: ease-in-out 300ms;
  &:hover {
    background-color: red;
  }
}
.header .header-nav-wrapper a {
  padding: 0.1em 0.8em;
}

Thank you so much! 

For the tagline, would you recommend adding the text in the section below and then using CSS to move it up by x% and finetuning it (and praying it doesn't move around too much depending on viewfinder)? Or is there an easy way to add it to the header directly?

I would suggest adding it as a pseudo element after the logo using CSS or JavaScript.

Hm so I tried the flex direction but for whatever reason the option at the top of the stack is weirdly extended to the left, like there's some extra padding. I've rearranged the order and it still happens.

Also (sorry) if I add the tagline ::after the logo, is there a way to position it perfectly in the center of the header? 

I'm sorry for all the questions, for some reason I'm struggling with this puzzle! Really appreciate the help.

20 hours ago, RobinBDG said:

Also (sorry) if I add the tagline ::after the logo, is there a way to position it perfectly in the center of the header?

Might be tricky given the sizes.