PrimeFaces centering searchbar on menubar

Question

Been trying to center the search field on the menubar. It either sticks to the far left or far right, I have used float left and right using css as follows to no avail:

body .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem.ui-menubar-options {
  margin-right: 0.5rem;
}
body .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem.ui-menubar-options > button {
  float: right !important;
}
body .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem.ui-menubar-options > input {
  float: none !important;
  margin-right: 0.5rem;
}

The below image is the one I want to create, where I shift the search bar from right to the right highlighted section. Any suggestions please?

Answer 1

First, the MenuBar was not designed to have centered items so you will have to "hack" it.

You have to remove float:right on the menubar and then adding padding from the left until its centered where you want it.

body .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem.ui-menubar-options {
   float:none;
   margin-left: 5rem;
}