Add a text to the Employee center Header

johnvpr
ServiceNow Employee

‎06-17-2024 01:33 PM - edited ‎06-17-2024 01:34 PM

Here is how you can add text via CSS to the header without modifying the widget:

johnvpr_0-1718656275083.png

 

Add and tweak to your needs this CSS to your sp_theme:

 

 

// JP Custom header text
.navbar-brand{
 display: flex;
 align-items: center;
}
 
.navbar-brand img{
//  filter: invert(1);
  margin-right: 30px;
  margin-left: 100px;
}
.navbar-brand:after {
  content:"ACME inc.";
    margin-left: 100px;
        margin-top: 5px;
    font-size: 30px;
    font-weight: bold;
}
.homepage-search-bg {
  border-radius: .8rem; 
  position: relative;
}
   
// JP Custom header text - end

 

 

Thank you Andrew S, for sharing the sample code

 

John

  • 1,041 Views
1 REPLY 1

johnvpr
ServiceNow Employee

3 weeks ago

This is an updated version for the newer theme:

 

 
// JP Custom header text
.navbar-brand {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.navbar-inverse .navbar-header .navbar-brand img {
  // filter: invert(1);
  margin-right: 50px;
  margin-left: 50px;
  width: auto !important;
  height: auto;
  max-height: 4rem;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
}

.navbar-brand:after {
  content: "ACME inc.";
  margin-left: 100px;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
}

.homepage-search-bg {
  border-radius: .8rem;
  position: relative;
}
// JP Custom header text - end
0 Helpfuls