Customizing SearchBox in SharePoint 2013 Online

Question

My customer is not happy with the current position of the SearchBox. So My job is to move it in the X (o365cs-nav) or in the Y (ms-cui-TabRowRight) position. I am looking for these positions in seattle.html master page.

Yet to find any workaround or these positions.

I know the position/location of the SearchBox in seattle.html. Desperately need the position of X or Y

Answer 1

The elements in positions X and Y which you are looking for are generated on the fly. You will not find the source of them in the seattle.html.

Position X: Its nothing but inside the SuiteBar which lies in div with ID ms-designer-ribbon.

source in seattle.html

Above image clearly indicates that there is no source for what you are looking.

The generated html for suite bar looks something like below

Position Y: This is again similar to X inside div with Id ms-designer-ribbon, which is generated on run time.

Solution: You can set the display attribute of the current OOB positioned search box in master page to none. Then write a simple JavaScript to change the position and make it visible.