Centering part of menu on full width header

Hey dweddell,

Thank you for the inquiry.

Since the phone number and the free trial button is part of the menu container, there is no other way to center align the rest of the menu items aside from adjusting the margin between the very last menu item and the phone number. One workaround is to move the phone number and free trial button in a separate container or add them as widget. You can then adjust the style of this widget container separately. The following documentation should help.

// https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

If you don’t want to use the widget, you can try this css code but you might still have to adjust the position of the phone number and the button on different screen sizes.

@media only screen and (min-width: 990px) {
  /* Add your Desktop Styles here */
  .responsive #top .main_menu {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .responsive #top .av-main-nav-wrap {
    float: left;
    position: relative;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
  }

  .responsive #top #header #menu-item-67 {
    position: absolute;
    right: -400px;
  }

  .responsive #top #header #menu-item-114 {
    position: absolute;
    right: -200px;
  }
}

Make sure to temporarily remove the previous css code after adding the above css.

Best regards,
Ismael

Hi,

No problem! Please feel free to open a different thread if you have more questions about the theme.

Have a nice day.

Best regards,
Ismael