How to add text on SP Header Menu?

User · ‎06-07-2017

I want to add a text say 'Hello' on SP Header at the location marked below on SP Header Menu:

var obj = {name: 'Amit'}

Is there a way?

Tried to create a menu Item, but that shows just left to knowledge, whereas, i want to place it next to logo.

Shiva Thomas · ‎06-07-2017

Hi Swati,

I warned you about having to tinker with the CSS...

Try this on your Copy of Stock Header...

div#custom_header_text {

   display: block;

   position: fixed;

   top: $sp-logo-max-height / 2;

   left: $sp-logo-max-width + 25px;

}

Change the top and the left value to tune the position of your text, depending of your logo size. You may have to hardcode the value.

Here is the result...

You can also add more styling, like choosing the font... If you want to mimic the style of the menu, you can add

font-family: "SourceSansPro", Helvetica, Arial, sans-serif;

font-size: 14px;

Shiva Thomas · ‎06-07-2017

Hi Swati,

The quick and easy way is to remove the logo in the Service Portal Branding Editor...

Without the logo, the default theme displays the Portal Title instead.

User · ‎06-07-2017

This is working if i don't have any LOGO, but i want both 'LOGO' and 'text' next to it.

Is there a way to have both ?

Shiva Thomas · ‎06-07-2017

Hi Swati,

The better solution would be to clone and edit the "Stock Header" Header.

Here I create a 'Copy of Stock Header' and added the highlighted line.

And select your new header in the Theme you use...

Here is the result. You'll have to tune the CSS to ensure the best layout...

User · ‎06-07-2017

Hey,

Thanks for your response.

I tried what you suggested earlier, but got the below output:

I want it to be in the same line somewhere between logo and QA Instance.

The 'Hello' that you showed is a bit down and not in the same line.

Regards,

Swati

ServiceNow Community servicenow community