How to change employee center footer to a simple line with links

[johnvpr]

For certain use cases, a simplified footer layout may be desirable—displaying only the logo and primary navigation links, as illustrated below.

From this:

To this:

This can be implemented by adding the following CSS and by editing the sp_theme - CSS Variables by adding this code:

/*********************************** JP FOOTER ***********************************************/
// jp logo container height
.scrub-footer .sf-main  {
	// background-color:#080808 !important; 
        height:80px;
}

// jp image height
.scrub-footer .img  {
 width: 20px;
}

// jp hide OOB links
.scrub-footer .sf-main .sf-links-container .sf-group
{
   display: none;
}


// jp move copyright field (text -> new links) to left
.scrub-footer .sf-main .sf-logo-container .sf-logo-content {
    position: absolute;
    right: 0;
    top: 5px;
    padding-top: 28px !important;
}


// jp left text
.scrub-footer .sf-main {
      position: relative;
}

// jp logo
 .scrub-footer .sf-main .sf-logo-container .sf-logo {
    padding-top: 0px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    max-height: 140%;
}
 
 
    

And change the "Employee Center Footer" sn_ex_sp_footer like this: