Theme Options -- CSS rules not being applied, either from Theme Options, nor from Child Theme CSS

bryandavey72 · December 2019

Hello! Thank you for taking the time to read this post.

I am having trouble trying to customize the Creative Header Full Width Layout. It seems that the "body.header-creative.header-open " of the site pages overlaps the creative header by 50px. When I try to change the rule for the Content's Padding to correct the overlap, it seems that the rule is not applied.

I have tried to place the CSS in the child theme .css file, and in the Theme Options CSS area, but they do not seem to over-ride the CSS rules for the page.

I am able to write jQuery that fixes the overlap, but it does not address the issues with other screen sizes i.e if I add a jQuery rule to Custom JS, "$(".layout-full-width").css("margin-left","50px");" it applies to all screens, which adds a gap to small screens (<1240px).

My question specifically is, "Is there a way to make the Creative header 300px wide instead of 250px, so that the full width content is not covered by 50px on the left hand side?"

Is my enqueing of the CSS rules for the site correct?

The Site is "https://healingstreamsint.org/" If you need admin access, please let me know.

Thanks for your attention to this, it's much appreciated.

~B

Pablo · December 2019

Hello,

We suggest not to touch the theme source code, a lot of elements are applied by the Javascript code and it could make other elements not work properly.

Unfortunately, there is no option to increase the "Header Creative Always Open" width through the theme options, all you can do is use the "Simple" menu with "Side Slide" option and increase the width to 300 (or even more) in Theme Options > Responsive > Header

Also, can I take a look at the page with 250px width? If there is something overlapping, maybe we'll be able to resolve it without the CSS code.

Thanks

bryandavey72 · December 2019

Thanks for taking at look at this, Pablo. I didn't describe my issue very well, sorry!

The main body content is overlapping the Creative Header, but behind it so it's being cut off by 50px. You can see here, at the top where the map shows the address on the top left. It's behind the header: https://healingstreamsint.org/contact/

When I alter the padding in the Chrome browser's code, it works OK with:
@media only screen and (min-width: 1240px)
body.header-creative.header-open {

padding-left: 300px;

}

But, when I add the CSS to either my child theme's style.css, or use BeTheme's Custom CSS section, it doesn't change the padding when I reload the page. :-/

Maybe dynamic CSS is overwriting my child theme rules? I can't find any place to alter that. Is there a way to make my child theme styles get applied?

Thanks again for all your help.

Pablo · December 2019

Please use this CSS code:

@media(max-width:1240px){
     html body #Wrapper #Content{
	padding-left:50px !important;
	box-sizing: border-box !important;
}}

It should solve your issue.
Thanks

bryandavey72 · December 2019

Thank you very much, Pablo, you're the BEST! ^:)^

Theme Options -- CSS rules not being applied, either from Theme Options, nor from Child Theme CSS

Comments