Customizing my Header for FLATIRON Template

I currently need help editing my header so it looks similar to the image posted below.

I am looking to move the title "waqas" in the middle and the page links "Work" and "About" on each side respectively. 

ATTACHED is a mock-up i'm looking to achieve

1 hour ago, Waqas said:

I currently need help editing my header so it looks similar to the image posted below.

I am looking to move the title "waqas" in the middle and the page links "Work" and "About" on each side respectively. Here's the page in question. Thanks so much in advance.

ATTACHED is a mock-up i'm looking to achieve

Which template and version are you using?

On 1/17/2022 at 11:27 PM, bangank36 said:

Which template and version are you using?

I am using FLATIRON Version 7.0 Thanks so much in advance 🙂

7 hours ago, Waqas said:

I am using FLATIRON Version 7.0 Thanks so much in advance 🙂

Try adding to Home > Design > Custom Css

#navigator .siteTitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Let me know how it works on your site

6 hours ago, bangank36 said:

#navigator .siteTitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

This moved my name in the middle but I would like to move my page link  'ABOUT' on the right side of the page. This is how the top looks like right now - see file attahed.

Thanks so much for your help so far!

On 1/19/2022 at 6:35 PM, bangank36 said:

Try adding to Home > Design > Custom Css

#navigator .siteTitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Let me know how it works on your site

Any other tips you would suggest? This moved my name in the middle but I would like to move my page link  'ABOUT' on the right side of the page. This is how the top looks like right now - see file attahed.

Thanks so much for your help so far!

On 1/22/2022 at 6:01 AM, Waqas said:

Any other tips you would suggest? This moved my name in the middle but I would like to move my page link  'ABOUT' on the right side of the page. This is how the top looks like right now - see file attahed.

Thanks so much for your help so far!

Try adding this code to Design > Custom CSS

@media screen and (min-width:641px) {
#navigator header#topBar ul#nav>li:nth-child(3) {
    position: absolute;
    right: 0;
}
#navigator .siteTitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
}