I am customizing the SharePoint online main menu, and to do so i added this javaScript to add a button at the end of the menu items:-

var e = document.createElement('div');
e.classList.add('ms-HorizontalNavItem');

e.innerHTML = "<a data-automation-id='button-web-part' href='https://***/' target='_blank' class='ms-Button ms-Button--primary root-251' data-is-focusable='true' style='background-Color:green;color:while'><span class='ms-Button-flexContainer flexContainer-252' data-automationid='splitbuttonprimary'><span class='ms-Button-textContainer textContainer-253'><span style='color:while'>Shop me some</span></span></span></a>";



var ele = document.querySelectorAll('[role="menubar"]');
ele[0].appendChild(e);

now i result i got will be as follow:-

but i want the item/button to be as follow, bigger with rounded corners:-

any advice?

CodePudding user response：

• just add padding and text color on <a>

<a data-automation-id='button-web-part' href='https://fullstackgear.com.au/' target='_blank' class='ms-Button ms-Button--primary root-251' data-is-focusable='true' style='background-Color:green; text-decoration: none; padding: 10px 20px; border-radius: 10px;
    background-Color: green; '><span class='ms-Button-flexContainer flexContainer-252' data-automationid='splitbuttonprimary'><span class='ms-Button-textContainer textContainer-253'><span style='color: #fff;'>Shop me some</span></span></span></a>