Not sure why global css isn't working

[justjane]

I added the following global css to change header background to white. can’t figure out why not working.

/*.x-header-landmark {
background-color: #fff !important;
text-align: center;
padding-bottom: 50px;
padding-top: 50px;
}

[nabeel]

Hi @janequade,

Thank you for reaching out to us. There’s a syntax error in your code, you’ve /* before the selector which will comment out your code, please replace it with the following:

x-header-landmark {
background-color: #fff !important;
text-align: center;
padding-bottom: 50px;
padding-top: 50px;
}

If this doesn’t work then please provide the site URL so we can take a look, there might be other syntax errors in your Global CSS, you can check the errors and validate your code here http://csslint.net/

Also clear all caches including your browser’s cache after adding making changes. Let us know how this goes!

[justjane]

That was part of the comment, not the code. see below.
I did fine another syntax error (; after landmark) and fixed it. still not luck

/*
// change header background color
*/

.x-header-landmark; {
background-color: #fff !important;
text-align: center;
padding-bottom: 50px;
padding-top: 50px;
}

[justjane]

I’ve tried css lint and several others. I still can’t figure out the parsing erros.

[ruenel]

Hello @janequade,

To resolve your issue, you must correct your custom css first. Please have it updated and use this instead:

/*
// Provided by Apex support - full width navbar
*/
.x-navbar .x-container.max.width {
    width: 100%;
    max-width: 100%;
}


/*
// Typography.
*/

h1, .h1,
h2, .h2,
h3, .h3 {
  line-height: 1.3;  
}

h4, .h4,
h5, .h5
h6, .h6 {
  line-height: 1.5;
}

input[type=text],
input[type=email] {
  height: 50px;
  border-radius: 3px;
}


/*
// Masthead.
*/

.home .masthead {
  position: absolute;
  width: 100%;
}

.single-post .masthead {
  position: relative;
  width: auto;
  background-color: #999;
}

@media (max-width: 979px) {
  .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
  }
}

/*
// Utilities.
*/

.vat { vertical-align: top !important; }
.vam { vertical-align: middle !important; }
.vab { vertical-align: bottom !important; }


/*
// Overlay color - added CLASS bg-overlay for background overlay
*/

.bg-overlay {
	position: relative;
}

.bg-overlay:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  content: '';
  display: block;
}

And then you can add this:

 .x-header-landmark {
	background-color: #fff !important;
	text-align: center;
	padding-bottom: 50px;
	padding-top: 50px;
}

Hope this helps.

[justjane]

Thanks for the help. Followed instructions but it didn’t work.
still have dark background behind logo.

[ruenel]

Hello Jane,

The css code works. You can check it that it was applied to your category and archive pages because that is where the landmark header displays. Please find the links in the secure note:

I think you are referring to the wrong section. You maybe referring to the logobar. To change the background color of the logo in your site, simply go to X > Theme Options > Renew and use the color picker just like what I’ve shown in the image below:

Please let us know if this works out for you.

[justjane]

Wow. You were correct.
I was referring to the logo bar.
Thanks so very much.

[rad]

You’re most welcome!