Make the position of the global header bar adjustable

[aolko]

Can i switch the header/sidebar to be on top instead of on the left?

[alistair3149]

The 2.X version will keep the global header on the side for now, but it is likely that it will be kept that way.
Meanwhile you can continue to use the 1.X version if you prefer to have the global header on the top, though its development is frozen in favor of the 2.X version.

[aolko]

i'm using 2.x only and it would be great to have header/sidebar like on starcitizen wiki

[alistair3149]

The English Star Citizen Wiki is still on the 1.X version, though we are planning to update it soon.
We don't have the resource to maintain both version currently, so 2.X is being prioritized.

[aolko]

so maybe implement that as a setting...or share the ugly hack that allows to do that for 2.x?

[alistair3149]

Maybe later down the line.
There are a lot of tasks that needed to be done for the MW 1.39 release, so it would probably be quite a while.

[SKevo18]

What is the status of this? I would like the header to be on top too, for both desktop and mobile view. Is it too much work to modify the CSS or JS to move it to top?

[SKevo18]

What is the status of this? I would like the header to be on top too, for both desktop and mobile view. Is it too much work to modify the CSS or JS to move it to top?

Meanwhile, I made this CSS that moves the header to the top (and positions properly all related popups, dropdown menus, page toolbars, etc... that I could find). It isn't perfect, but should help someone who wants to move the header to top on mobile devices.

To use it, just go to the MediaWiki:Citizen.css page on your Wiki and paste the following code (you might need to clear the cache for the changes to show up):

@media screen and (max-width: 1129px) {
  /* Move the header to top */
  .citizen-header {
    bottom: unset !important;
    top: 0 !important;
  }

  /* Fix navigation bar, page settings and user card dropdown positions */
  .citizen-header .citizen-menu__card {
    bottom: unset !important;
    top: 50px !important;
  }

  /* Uncomment to fix notification menu popup position: can be buggy /*
  /*.mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
    top: -961px !important;
  }*/

  /* Fix header position (hide animation) when scrolling down */
  .citizen-scroll--down .citizen-header {
    transform: translateY(-100%) !important;
  }

  /* Fix page actions position gap */
  .page-actions {
    bottom: var(--space-xs) !important;
  }

  /* Fix ToC position gap */
  .citizen-toc {
    bottom: var(--space-xs) !important;
  }

  /* Make header not cover top of body */
  .citizen-body-container {
    padding-top: var(--header-size);
  }
}

Note: the CSS was made for Citizen ver. 2.25.0 (6711196)