How to move the search box to the right of the side in SharePoint Online

Question

I want to move the search box to the right of the side of the top of site in SharePoint Online, can anybody help me with it?

Answer 1

@Andy ,

To meet your requirement, check as following:

Manually deploy SPFx Applications Customiser CSS Injection web part to your tenant first:

①Upload the react-application-injectcss.sppkg from the sharepoint folder to your App catalog.

②When prompted to deploy to all sites, choose the option that suits your needs.

③Then create a custom CSS file that meets your needs. For example, this CSS will move the search box to the right of the side.

.o365cs-base ._8X8lWYtRJ2OY6mg2TEIbk{  
left: 500px !important;  
}  

④Upload the CSS file as custom.css to your Styles Library of the root site collection (i.e.: https://<yourtenant>.sharepoint.com/Style%20Library/Forms/AllItems.aspx).
⑤Navigate to your site. Your custom CSS should be applied.

Note:

To simplify deployment, the extension looks for a custom.css in your tenant's root Style Library. If you wish to use a different CSS name and location, refer to this:

https://github.com/hugoabernier/react-application-injectcss#changing-the-css-location

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---