/* Fix menu text wrapping by making them inline */
  .header-bar .main-nav .menu-text,
  .header-bar .main-nav .subtitle-text,
  #phantom .main-nav .menu-text,
  #phantom .main-nav .subtitle-text {
      display: inline !important;
      white-space: nowrap !important;
  }

  /* Override the exact phantom selectors causing the issue */
  #phantom.inline-header.center .main-nav,
  #phantom:not(.split-header) .main-nav,
  .inline-header.center .ph-wrap.with-logo .menu-box,
  #phantom .with-logo .main-nav {
      -ms-flex-pack: start !important;
      -ms-justify-content: flex-start !important;
      justify-content: flex-start !important;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
  }

  /* Force phantom header container to flex */
  #phantom,
  #phantom .masthead,
  #phantom .header-bar {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: nowrap !important;
  }

  /* Regular header CSS */
  .header-bar {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: nowrap !important;
  }

  .header-bar .main-nav {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      order: 2 !important;
  }

  .header-bar .main-nav > li {
      display: inline-block !important;
      float: none !important;
      width: auto !important;
      margin: 0 10px !important;
  }

  .header-bar .branding {
      order: 1 !important;
      flex: 0 0 auto !important;
  }

  .header-bar .mini-widgets {
      order: 3 !important;
      flex: 0 0 auto !important;
  }