Forum Discussion
Create a button in the navigation bar on the right
Pavel48n0sh Are you trying to add this button on single page or on all modern pages?
For single page: You can use modern script editor web part as mentioned by NicolasKheirallah
For all modern pages: Use SPFx application customizer to inject custom JS/CSS to add button on all modern pages.
Check this for more information: 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.
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
ganeshsanap Yes, I'm trying to add this button for all modern pages.
I use SPFx Application Customizer and find the class (actionsWrapper-58) I need in order to add a new element (div with class new-link_box) to it.const articleDiv = document.querySelector('.actionsWrapper-58'); const elem = document.createElement('div'); elem.classList.add('new-link_box'); articleDiv.insertBefore(elem, articleDiv.firstChild);
But, sometimes when I reload the page, this class can change from actionsWrapper-58 to actionsWrapper-90, in connection with this, the button does not always appear.
I found out that only these two class names alternate. Now I want to somehow search for this parent block, not by the entire name of the class, but only by the part up to the numbers (actionsWrapper).Pavel48n0sh Use div selector like below:
const articleDiv = document.querySelector("div[class^='actionsWrapper-']");Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
