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?
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;
}