I'm trying to customize the Sharepoint 2016 suite bar so that the username is displayed at the immediate top left (instead of far right) as well as remove "My Personal Settings" from menu dropdown. This may not be perfect but I have identified two tags that can be removed to accomplish my desired result. The div tags are ".o365cs-nav-leftAlign" and "#O365_SubLink_SuiteMenu_zz2_ID_PersonalInformation".
I realize that I can use CSS to hide the elements but that doesn't prevent users from using chrome developer tools to unhide so I decided to go with JQuery remove method.
Works really well except for one annoying problem. When the page loads, it appears to remove the tags, rendering the page properly but then undoes what just happened. If I click the refresh browser button, all works well. What is going on?? I've spent countless hours on this with no solution. It looks like the elements re-render after page load. Here is my JQuery from master page:
<!--SPM:<SharePoint:ScriptBlock runat="server">-->
$( window ).on( "load", function () {
$( ".o365cs-nav-leftAlign" ).remove();
$( "#O365_SubLink_SuiteMenu_zz2_ID_PersonalInformation" ).remove();
});
<!--SPM:</SharePoint:ScriptBlock>-->
Fyi, I don't require the section that includes the "Sharepoint" text (current left section) so deleting tag works well.
Any help would be greatly appreciated.
Thanks, Doug