Centre alignment site header, including logo and button

Site URL: https://www.parviz.ca

I would like to achieve the site header as seen on Apple.com website. The navigation links, logo and buttons should be aligned to the centre of the page. I've attached a photo of how my current header looks like: logo is on the far left of the header and the Book Appointment button is on the far right. The end result I would like to achieve is identical to the site header as seen on apple.com

Thanks

Hi. Try adding to Design > Custom CSS

/* Align center header */
.header-title {
    text-align: right;
}
.header-actions.header-actions--right {
    justify-content: flex-start;
}

15 hours ago, tuanphan said:

Hi. Try adding to Design > Custom CSS

/* Align center header */
.header-title {
    text-align: right;
}
.header-actions.header-actions--right {
    justify-content: flex-start;
}

 

It's working, however I would prefer if the navigation links are displayed all on one line. Currently, "Home Organization Products" is displayed on a second line

Try new code

/* Align center header */
.header-title {
    text-align: right;
}
.header-actions.header-actions--right {
    justify-content: flex-start;
}

nav.header-nav-list {
    flex-wrap: nowrap !important;
}

9 hours ago, tuanphan said:

Try new code

/* Align center header */
.header-title {
    text-align: right;
}
.header-actions.header-actions--right {
    justify-content: flex-start;
}

nav.header-nav-list {
    flex-wrap: nowrap !important;
}

 

Seems to be working, thank you.

Here is the full code:

Quote

 

/* Align center header */
.header-title {
    text-align: right;
}
.header-actions.header-actions--right {
    justify-content: flex-start;
}

nav.header-nav-list {
    flex-wrap: nowrap !important;
}
.header-title-nav-wrapper {
    flex: 1 0 82% !important;
}
.header-nav {
  width: 100% !important;
  flex: 1 1 100% !important;
}

 

Hi @tuanphan, I wonder if this is  a similar or different question.

I'm trying to get my site header and nav to look like the attached screenshot, but when I put the code in, it's not putting the navigation under the "logo". How would I make the text-logo large and put the navigation underneath? Like in this picture.

On 10/24/2022 at 12:59 AM, Dafne said:

Hi @tuanphan, I wonder if this is  a similar or different question.

I'm trying to get my site header and nav to look like the attached screenshot, but when I put the code in, it's not putting the navigation under the "logo". How would I make the text-logo large and put the navigation underneath? Like in this picture.

Can you share site url?