Header will not connect to Global CSS for new pages

Support
#1

Hello,

I have been using the global CSS feature to manage my header CSS styles. Up until now, it has worked fine.

I started introducing the new Flexbox features to some of my new pages and since then the header has reverted back to its old style and won’t connect to the global CSS anymore, this is only on these specific pages. Here is an example: https://decisionbrain.com/home/dbos/

I am curious about how to make sure they still communicate, I’ve taken the CSS styles and brought them into the page and that works so its something with the global CSS communication. (When I am saying Global I mean in the theme options page under CSS). I also utilize a Child Theme, not sure if this changes anything.

Here is the main page of the domain (the header works in this case):

#2

Here are the current navbar CSS styles being used:

.x-navbar .desktop .x-nav li>a>span:after {
    display: none;
}

.x-navbar .sub-menu li a {
    font-size: 14px;
}

.x-navbar .x-container {
  max-width: 100%;
  padding: 1px 1% 1px 5% ;
  width: 100%;
}

.x-navbar .desktop .x-nav > .current-menu-item > a{
background:none;
box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 #fff;
}


.x-navbar .desktop .x-nav>li ul {
  top: 65px;
}

.x-nav-wrap.desktop #menu-item-1314 {
position: fixed;
    right: 0px;
    top: -10px;
}
.x-nav-wrap.mobile .menu-item-1314 img {
display: none;
}

@media (max-width: 979px) {
  .x-btn-navbar {
    display: block !important;
    margin: 15px auto 0px auto;
    width: auto;
  }
}

.x-icon-bars {
    color: #00427a;
}

.ibm-btn-menu {
	background-image: url('https://decisionbrain.com/wp-content/uploads/2019/02/IBM-Logo.png');
	background-repeat: no-repeat;
  background-size: 100px;
  padding: 0px;
	margin: 15px 0 0px auto;
  width: 100px;
}

/*IBM Button Text hide*/
li#menu-item-2671 span {
  color: transparent ;
}
#3

Hey Jeffrey,

I checked your other pages in your site and that code works. That is not present in the page you posted so that means that there’s something breaking the CSS generation before that code and it’s usually CSS syntax errors introduced within an element’s Element CSS or even in within Global CSS,

To help you find the errors, please check all your custom CSS code blocks in CSS validation sites like http://csslint.net/. Or, you can temporarily remove all the custom CSS in Global CSS and Element CSS and only use the code you posted here. That will also quickly tell you if your other custom CSS is causing the issue.

After checking all your custom CSS in Global CSS and Element CSS, please give us WordPress Admin access in a Secure Note so we could check what else is causing the issue.

Thanks.

1 Like
#4

Thanks Christian,

I’ve checked my CSS and fixed what Lint suggested. I have also localized what the issue is but it seems to be an issue with the introduction of the flexbox feature.

The conflict happens when I apply one of the page templates I have saved. I’ve deleted every component individually and removed CSS but it seems to be something with the template as a whole. The only thing I have changed is applying some of the new flexbox features provided in the template.

Could I get some help with this?

#5

Hey Jeff,

I see you have lots of page templates. What’s the template you loaded so we could test it out in our sites and see if that will break the Global CSS?

Thanks.

1 Like
#6

Hello Christian,

The page template is “Page Template - 3 Features - 28.11.19”

#7

Hey Jeffrey,

As expected, the template is corrupted. There’s corruption in CSS somewhere in the generated CSS only in the page. I saw misconfigured options like incomplete CSS values like this:

I fixed that but there are more errors the validator can’t specifically point out because the generated CSS is minified.

I’m sorry to say that you will need to rebuild the page from scratch. I’d also recommend deleting the corrupted page template.

#8

Hello Christian,

Thanks for the help. I located the corruption issue in CSS and was able to have the global css connect to the template.

Cheers

#9

Glad you sorted things out,

Cheers!

1 Like
#10

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