How to change blocks to the left and right of the logo block

Support
#1

Integrity light, in the header I’m trying to change the white background to the left and white of the green logo block on http://j5d.c2c.myftpupload.com/ to match the green in the logo; I wish to leave the topbar (with phone and social) and the menu/nav bar white. Please advise with thanks!

#2

Hi there,

Please try this code in the Global CSS:

.x-logobar {
    background-color: #019934;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#3

I’ve tried that and it did not work; I’ve also tried the following based on previous posts in the knowledge base:

.x-navbar {
background-color: #2c3f96 !important;
}

And

.masthead .x-navbar-wrap .x-navbar {
background-color: #2c3f96 !important;
}

#4

Hey @NeilRain,

@Jade’s code would work.

Please ensure

  1. you’ve added it in Theme Options > CSS and not style.css
  2. you have copied it correctly and there are no syntax errors in your CSS.

You can lint all of your CSS here.

Thanks.

#5

I’m adding it under Customize, Custom, Global CSS within the Customizer. Is that correct?

#6

Lint said "Expected RBRACE at line 16, col 1.
.x-logobar {

So I placed all of the code on line 16 as this:

.x-logobar {background-color: #009933;}

still did not work

Here is all code in Global CSS (Customizer):

.x-colophon.bottom .x-social-global a {
font-size: 35px; /* increase depending on the size you prefer.*/
}
.x-topbar .x-social-global a i {
font-size: 1.8em;
}
.x-topbar .x-social-global a.facebook {
background-color: #fff;
color: #3b5998;
}

.x-topbar .x-social-global a.facebook:hover {
background-color: #fff;
color: #3b5998;

.x-logobar {
background-color: #019934;
}

#7

Hi again,

There is a missing curly bracket in your code, please replace your code with the following code:

.x-colophon.bottom .x-social-global a {
font-size: 35px; /* increase depending on the size you prefer.*/
}
.x-topbar .x-social-global a i {
font-size: 1.8em;
}
.x-topbar .x-social-global a.facebook {
background-color: #fff;
color: #3b5998;
}

.x-topbar .x-social-global a.facebook:hover {
background-color: #fff;
color: #3b5998;
}
.x-logobar {
background-color: #019934;
}

Let us know how this goes!

#8

That was it. Always that small detail, thanks so much for guiding me through. The support at X has always been great - hence the number licenses I’ve purchased! With thanks and respect,

Neil

#9

Thanks for the kind words Neil, we are gratified that we’re able to help you with this.

Cheers!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.