Anyone knows how to set the Employee Center header to fixed instead of fluid (max width)

[Alex87]

Hi, I have a requirement to set the Employee Center header to the same width as the rest of the page > Employee Center pro. So fixed size and not fluid whereby max width is being used.

[Alex87]

Similar to this site (and many many others). It is all aligned the header with the rest of the page.

[Alex87]

Any suggestion?

[Alex87]

any reply and suggestions from anybody?

[RodGallegos]

Hello @Alex87 My suggestion would be to clone the OOTB header and add "container" as a class in the html. EC and all of ServicePortal uses Bootstrap and "container" will apply it's rules of "margin-right & margin-left" auto" as defined by the Bootstrap file that's loaded with the portal page. Using inspect element, here's my result. It's not pretty but as you can see, the majority of the page is contained within a "container" and the header is lining up with the search and announcements just below Content Experience.  See my screenshots below. Also, as I adjusted the page size, the header did not grow and shrink, which is what you want. This should help you get the majority of the way. Some decisions will have to be made on your part as to look and feel. Please mark if helpful and keep me posted on your progress. Cheers! 

 

 

 

[Alex87]

Rod, this is a really nice and simple solution. Thank you for sharing this. I only facing now the challenge that the background color of the header and footer has two parts. The top and bottom part. both have a different background. For now i have put one background color on .sp-page-root header.. but that has not a split row in it.