Change the colour of the top bar

Support
#1

What is the CSS code to put in the customizer that changes the background colour and text for the top bar

http://www.williamsondrainage.co.nz

eg background color: white
text & social icons: dark grey

#2

Hi @VelocityWeb,

Thanks for writing in.

Add this in your custom CSS:

.x-topbar{
background-color:#FFF;
} 

.x-topbar .p-info{
color: rgb(76, 76, 76);
}

.x-topbar .x-social-global a {
    color: #636262 !important;
}

Let us know how it goes.

Thanks.

1 Like
Change Top Bar Text Color
Top Bar styling
#3

That’s excellent! Thx :smiley:

If I wanted the hover color to be black what would I add?

#4

Hi There,

Please add this CSS:

.x-topbar .x-social-global a:hover {
    color: #000 !important;
}
1 Like
#5

Thanks

I have that code in https://www.adventureride.co.nz/ but it is not working ???. Is there a default setting overriding the code?

This is a pro theme and that might be the problem

#6

Hello There,

Upon adding above code shared by our staff on Chrome dev tools it seems to be working fine on my end. Looks like you have removed the code, can you please try adding again? Please clear browser cache and then load the page. Let us know how it goes.

https://screencast.com/t/ZqtSuHShY77P

Thanks.

#7

All good on that site but I entered the code on https://www.adventureride.co.nz/

Ita a Pro theme

https://d1ro8r1rbfn3jf.cloudfront.net/ms_126298/JzjdwFaLHU5f0UxYBLbpJxXQca3i8p/Adventure%2BTrail%2Brides%2B_%2BOff%2BRoad%2BDirt%2BBike%2BAdventures%2BNew%2BZealand%2B-%2BGoogle%2BChrome%2B2017-07-18%2B18.57.42.png?Expires=1500448087&Signature=Ua5Ks5mS4ND~jo~9iEgFTNaSKgBZyOz1I2ZF8dxh5nH3UbwDbIbZszDcMW95wVVeita05AuhmQk0zOTLsukNYC6jn7wsFCwp3glTvWYvnpbcjDxnaJ49rr~K78U~l0aRWeUiJOHJLBrMHZNI3TmMwaPqMAOpadsQx8ehcHJD~NB-jIeBb6i~tai3xQDOYIMB--vxOs720qW1i7HOQkL0J0o7V0xD-P~i5-RRjS4pZ6k-Giwz5FQQB10q1aHAb3w2oPOLS2UVA0uolLwTsVAjXMyKVXClq12xhgX6-QrmJ1o8fFA3T1TAI3V~iSIOB8ki6nqRWagRcWYVbjWtL5e3Og__&Key-Pair-Id=APKAJHEJJBIZWFB73RSA

#8

https://www.adventureride.co.nz/

Ita a Pro theme

https://d1ro8r1rbfn3jf.cloudfront.net/ms_126298/dXND0jPtYhfY4Ocl0DtN00GTI2Ygy5/Adventure%2BTrail%2Brides%2B_%2BOff%2BRoad%2BDirt%2BBike%2BAdventures%2BNew%2BZealand%2B-%2BGoogle%2BChrome%2B2017-07-19%2B10.47.33.png?Expires=1500504548&Signature=cgNp6UIS-qxoSrgbM~7AxFmmxkO~ehS7pSpaCLhP0RrEd2HMJOQAS9-RozQc5KuNy9YIbUF6QHtsuWTw7w43JqqyvlkThTs8NVbQ9~bLCEW5E4~WK03f14-Kd-M68j-YS2Y~jrz-~cVAGbmYtm9IcZsT4v5V8O3M-Z-d5ZTAQnESqzbqZdQfZHYlvg5nW8kP94JfyBcsBzsFmwS68V7KZnnb5p7frK7-n0Zo7A-Qd-3dSFmqqOaHRkmWa3BUhJ1-TSaPTRH3XPAl7Ng6-Hm8cQ~E2WNjPDqnECxqTGRwa8LbXUZjcrl7siF7kZvmOgmu0L2ta~~JRkJtEl7L70xNng__&Key-Pair-Id=APKAJHEJJBIZWFB73RSA

#9

Hi There,

Please check your entire custom CSS here (http://csslint.net) and resolve all found errors. Because those syntax errors are preventing some of your custom CSS to work.

And there are conflicting css codes from your CSS HERO, please remove this codes or just change this to style your topbar accordingly.

HTML > BODY > DIV#x-root > DIV#top > HEADER.masthead.masthead-inline > DIV.x-topbar > DIV.x-topbar-inner.x-container.max.width > DIV.x-social-global > A.facebook > I.x-icon-facebook-square {
       color: rgba(222,221,221, 0.25); 
    } 

HTML > BODY > DIV#x-root > DIV#top > HEADER.masthead.masthead-inline > DIV.x-topbar > DIV.x-topbar-inner.x-container.max.width > DIV.x-social-global > A.facebook > I.x-icon-facebook-square:hover {
       color: rgba(247,247,247,1)!important; 
    } 

HTML > BODY > DIV#x-root > DIV#top > HEADER.masthead.masthead-inline > DIV.x-topbar > DIV.x-topbar-inner.x-container.max.width > P.p-info > A {
       color: rgba(235,233,233, 0.25); 
    }

Thanks,

#10

I have removed the CSS

#11

Hi There

No, the css code is still there:

screenshot

It was added via CSS Hero together with a form styling.

Actually we can make our own CSS more specific to overwrite that, please update the previous css code given to this:

/*topbar background color*/
.x-topbar{background-color: white;} 

/*topbar links and social icon colors*/
.x-topbar .x-social-global a i,
.x-topbar .p-info a {
	color: gray !important;
}

/*topbar links and social icon hover colors*/
html body #x-root .site header.masthead.masthead-inline .x-topbar .x-social-global a:hover i.x-icon-facebook-square,
.x-topbar .x-social-global a:hover i,
.x-topbar .p-info a:hover {
	color: red !important;
}

But there is one little issue with that, notice the line:

html body #x-root .site header.masthead.masthead-inline .x-topbar .x-social-global a:hover i.x-icon-facebook-square,

that is a selector that is specifically pointing to the facebook icon on your topbar, but see when you hover the fb icon. It does not turn to red, that is because of the CSS code that is on your CSS Hero I said previously. So please you need to remove those.

Thanks,