How to add text on SP Header Menu?

[User]

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.

[sowmyaduggimpud]

Hello Swathi,

You might need to add margin-top accordingly to shift it to top. It should be something like : ( May need to adjust value of -30 if needed)

<div style="margin-left: 225px; margin-top:-30px">Hello</div>

Can you please try it and let me know if that works?

Regards,

Sowmya

[Shiva Thomas · Accepted solution]

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;

[User]

Thanks

That worked

[thomasm1]

THIS IS PERFECT!!!! Thanx...

One question though. When I mouseover, The text vanishes?

Regards Thomas

[Spencer Reed]

I'm not sure if you ever got your question answered, but this is due to the HTML code for your text being within the ANCHOR tag <a> for the portal.logo.

If you take the HTML code of your text and just paste it below the </a> after the image anchor then it won't disappear. While the code is within the anchor tag it'll be subjected to the formatting rules set up on the Branding Editor page of Service Portal Configuration.