Hi anyone knows how to add time near search bar please refer to red arrow in image. enter image description here

3 Answers 3


In classic SharePoint pages we could use the ContentEditor or ScriptEditor web parts to inject JavaScript to do this type of DOM manipulation. This worked because the DOM of classic pages rarely changed.

However, the same is not true of modern SharePoint pages. The DOM of these pages changes regularly so any manipulation using element Ids or CSS class names will eventually break. You can do some user interface customizations on specific areas of a modern page using the SharePoint Framework, but adding the time in the areas you indicated is not one of them.

I think your best option to add the time to the page would be to put it in a footer which you could add to the page using a SharePoint Framework Application Customizer extension.

  • thank you for the info. Jul 15, 2022 at 0:15

According to my research and testing, unfortunately, we cannot customize the top navigation bar in modern SharePoint sites, it is by default. We can only add link/label in the navigation bar. Thanks for your understanding.

enter image description here


If the answer is helpful, please click "√" on the left panel of the answer and kindly upvote it.

  • Do you have any further questions about this thread? If you have any questions or progress, you can contact me in time.
    – Zella_msft
    Jul 19, 2022 at 8:12

You cannot customize office 365 ribbon bar (top most navigation - near search box) to add time.

You have below two options:

Option 1 (Recommended): Use default page placeholders provided by Microsoft in SPFx application customizer to show the time in header/footer.

enter image description here

Follow Microsoft official documentation at: Use page placeholders from Application Customizer

Option 2: Inject custom JS/CSS using SPFx application customizer to show the time in navigation.

You can use SPFx application customizer to inject the custom CSS in SharePoint online modern pages. Check more information at:

  1. How can I include the same JS and CSS files on multiple SharePoint Modern Page?

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .