Need help with CSS for Service Portal header bar

[patricklatella]

Hi all,

I'm trying to fix the CSS so that the content in the header bar on a portal lines up properly, see the screen shot.  I'm tinkering with the CSS in Chrome dev tools but cannot isolate why that extra space is showing beneath the logo.  any help would be great, thanks!

[patricklatella]

the white space is part of the logo itself...and this is the script in the CSS Variable field on the Theme record...am I tinkering in the right spot?

$sp-logo-margin-x: 15px !default;
$sp-tagline-color: $text-color !default;
$navbar-inverse-bg: #3a3f51 !default;
$navbar-inverse-link-color: #bdc0c4 !default;
$navbar-inverse-link-hover-color: #ffffff !default;
$body-bg: #f0f3f4 !default;
$dropdown-link-disabled-color: #ccc;

a.navbar-brand.navbar-brand-logo.ng-scope::after {
margin-left: 222px;
position: fixed;
top: 23px;
font-size: 2em;
font-size: 1vw;
content: "Welcome To the XXXXXX Service Platform";
}

a.navbar-brand.navbar-brand-logo.ng-scope {
width: calc(200px + 20vw);
}

[patricklatella]

to clarify, the white space beneath the logo is not the issue...the issue is all the extra grey area beneath the logo...I need the logo and the "Welcome to ..." text to line up with the other links in the header.

[SanjivMeher]

You need to fix your HTML for that

[SanjivMeher]

The widget name is Header Menu

[patricklatella]

Hi Sanjiv!  good to hear from you.  Do I need to clone the widget to do this?