Hi Ed,
Actually there is a sneaky way to do it without modifying any widget or code: CSS that creates a dynamic sized title so it supports mobile also.
Steps:
Add the following CSS to the theme that the portal is using. You may have to create a new theme so it is not shared by other portals.
a.navbar-brand.navbar-brand-logo.ng-scope::after {
margin-left: 222px;
position: fixed;
top: 23px;
font-size: 1.9em;
font-size: calc(7px + 2vw);
content: "Enterprise Portal";
}
a.navbar-brand.navbar-brand-logo.ng-scope {
width: calc( 200px + 20vw);
}
What's going on here:
- It's adding a "Enterprise Portal" to the right of the logo but still inside the clickable "a" tag so it behaves as a hyperlink.
- In my case the logo is 200px wide, so margin-left leaves 22px buffer to the right
- the first font-size is for broswers that don't support the clever stuff
- the second font-size is saying that the size of a single character should be 2% of the browser width (2vw) + an addition 7px. This prevents the font from getting smaller than 7px on small screens.
- width tag is to make sure things wrap properly around the floating text by resize the a tag to be thewidth of the logo (200px) plus the variable with of the text (20vw for my text but would vary depending on the number of characters in the title)
Obviously you can't tweak all the sizes here and add colour or fonts, but you get the idea.
This has no impact on upgrades since no widget or code was modified to get the title in place.
Hope this answers your question.
Note you could extend this solution with media queries to prevent the font getting to big or to place the text under the logo on small screens.
Cheers,
Howard.
