Split Menu

Hi Tim,

Try this CSS:

.site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}
 nav#site-navigation {
    width: 100%;
}
 .menu-bar-items {
    order: -1;
}
 div#primary-menu, div#primary-menu > ul {
    width: calc(100% - 75px);
    justify-content: space-between;
    display: flex;
}

If you want to swap the contact and book button, simply re-order it at appearance > menus.

Thank you that worked!

However, it seemed to force contain the menu items...is there a way to make this full width so the right button is justified right and the left menu is justified left?

1. Go to customizer > layout > header, check the use navigation as header option.

2. Go to customizer > layout > primary navigation, set the Inner Navigation Width to full.

3. Go to customizer > layout > header, uncheck the use navigation as header option.

Awesome! Thank you Ying!

You are welcome :)

One more thing! i just noticed it reversed or mirrored the font awesome icon haha. Can i fix that somehow?

Do you mean you want the icon locate after the text?

If so, try this CSS:

.menu-item > a {
    display: flex;
}
 .menu-item > a > i.fas{
    order: 2;
    padding-left: 10px;
}

no..not after the text...the actual icon is mirrored so its backwards.

it should be like this: https://fontawesome.com/icons/phone?s=solid but it got mirrored.

That's odd, I'm not seeing any CSS could change the icon.

Try this CSS:

i.fas.fa-phone {
    transform: rotate(90deg);
}