Change SharePoint 2016 site header

Question

I have SharePoint 2016 and I want to change the following which is by default in my header going from left to right:

1. remove the menu in blue background with small square icons (I don't want this menu to appear);
2. Change "SharePoint" text to something else and
3. Remove "Sites" Link.

There are other options on the right of this header section but I'm fine with those options.

Your support is really appreciated

Answer 1

I added the following CSS to the "Site Setting > Look and Feel > Master Page" and in there I updated "Alternate CSS URL" to point to my CSS file:

.o365cs-nav-appTitle {
    display: none !important;
}


.o365cs-nav-appTitleLine {
    display: none !important;
}

span.o365cs-nav-brandingText {
  color: transparent;
}

span.o365cs-nav-brandingText::after {
 content: "Problem Management System";
 color: white;
 position: relative; 
left: -5em; 
}

#O365_MainLink_NavMenu{
    display:none;
}

Answer 2

You can get your design using CSS and JavaScript.

#O365_MainLink_NavMenu{display:none;} //it hides app launcher

//this one hides "sites"
.o365cs-nav-appTitle {
    display: none !important;
}

//this hides line between sharepoint and sites text
.o365cs-nav-appTitleLine {
    display: none !important;
}

I am updating text SharePoint to current web title using jQuery

//this script updates text SharePoint to your current web title
$(document).ready(function(){
     $(".o365cs-nav-bposLogo span").text(_spPageContextInfo.webTitle);
}

My suite bar converted as below