How to add text on SP Header Menu?

User
Tera Contributor

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

var obj = {name: 'Amit'}

find_real_file.png

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.

1 ACCEPTED SOLUTION

Hi Swati,



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



Try this on your Copy of Stock Header...


Capture d


Capture d


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...


Capture d


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;


View solution in original post

12 REPLIES 12

Hi Shiva,

Thanks for your help!

 I work in an instance that had this solution, but I had a problem with Announcements.

find_real_file.png

When an announcement is printed, the text is fixed:

 

find_real_file.png

 

[SOLUTION]

I changed in CSS properties, position = absolute:

find_real_file.png

 

Result:

find_real_file.png

 

I hope this information is useful.

 

 

 

 

find_real_file.png

 

Hi,

How do I add text to the SP Header Menu but I have used the Stock Header clone if I can still use the clone again and which is the configuration method for the second stock header so it can appear on the portal

Thank you.

fery_susanto992
Giga Contributor

 

Hi,

How do I add text to the SP Header Menu but I have used the Stock Header clone if I can still use the clone again and which is the configuration method for the second stock header so it can appear on the portal

Thank you.