Pro Header: No CSS

Support
#1

Hi there!

I have an issue with an header I have imported from an other page.

The CSS effects don’t updating in the frontend, after uploading via SFTP to the child theme directory. There seems to be the right CSS file on the server, but it doesn’t affect the frontend. (I changed the classes etc.)

Thanks a lot in advance!

#2

…solved…

…after uploading the parent theme again.

#3

Glad to know!

#4

Sorry for bothering again.

The effect was caused by the pro header css editor.

The css file on the server still doesn’t work.

#5

Hi Finlando,

If the CSS styles from the style.css file of the child theme does not work after you made some changes to the file, first, please try to check if there is any CSS error in the codes that you have in the file.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

If everything is correct but you still do not see any changes, you might be getting the cached version of the style.css file as that usually happens. Please try to clear your browser cache after making any changes to the CSS file.

Hope this helps.

#6

Hi Jade,

Thanks a lot for the detailed information.

The CSS has no errors. And there are also no caching issues.

Maybe it has something to do with the cloned site? I cloned it via Kinsta Hosting. Kinsta support are redirecting me to the theme support, since there is no caching on staging sites at all.

#7

Hi @Finlando,

Would you mind providing the CSS that aren’t working? Perhaps you should add !important to style value as well. Example, color: #000000 !important;. This make sure the CSS overrides other loaded style.

Thanks!

#8

Hi @Rad,

Sure… (CSS isn’t working at all)

.e1482-1.x-bar.x-bar-top.x-bar-fixed, .e1482-8.x-bar.x-bar-top.x-bar-fixed {
background-color: rgb(137, 142, 145) !important;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

.x-main.full {
background-color: #000 !important;
}

#9

Hi @Finlando,

Ah, I see it now. The header bar with the ID 1482-8 is no longer present in your page. It’s dynamically generated depending of what you added so it would change. Hence, recommend adding it to header bar’s element CSS instead of style.css. Example,

$el.x-bar-fixed{
background-color: rgb(137, 142, 145) !important;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

You have to add it to each bar where the styling is supposed to be applied.

As for .x-main.full, I can’t find it anywhere. What’s your child theme folder name? It appears to be active but I couldn’t find the child theme’s style.css. In fact, the active folder to /pro/ instead of /pro-child/. How did you install your theme? Have you installed it within the child theme overriding the child theme itself?

Please provide your admin login credentials in a secure note so I could confirm my questions too.

Thanks!

#10

Hi there,

Thanks a lot for the great support!

#11

Hi @Finlando,

Base on the custom CSS above, it seems you want the Bar background to change to gray on scroll (fixed header)? Is that right? If so, you already achieve it with the solution provided by Rad above (please see screenshot)

.This one:

.x-main.full {
background-color: #000 !important;
}

Please add this to Theme Options > CSS as this is not an element CSS.

Your issue with the child theme's style.css could be because of the wrong selector, like Rad explained above, Element IDs are dynamic so don’t use that as a selector, use $el inside the Element CSS area instead.

Thanks,

#12

Hi there!

my style.css file is still not affecting the site. (i think the problem came after importing an header template from an other site.)

i’ve tested everything with hosting support @kinsta - server side is fine. this is what they say:

Then you probably are not invoking it on your header file. So you will need to check how the theme works and who it enqueues the stylesheets.

can You help me please to find out what the problem is? the site has to belive in 2 days.

thanks a lot in advance for any information on this.

#13

Hello @Finlando,

I have checked your child theme files and I found out that there is no functions.php file which is why the style.css is not loaded in your site. I went ahead and upload the missing file. Please add any custom css now as the style.css is now being loaded in the site already.

If you need anything else we can help you with, please let us know.

#14

Hi RueNel,

thanks a lot for Your help.

the css is still not loading. i have added this lines to test it on the following page:

.x-main.full {
    background-color: #000 !important;
}

thanks!

#15

hi there,

it’s solved with the help of RueNel!

thanks!

#16

You’re welcome!

#17

Hi there!

I know, this is the wrong place for this question, but I wasn’t able to find other contact options…

I can not add a new topic in the forum. The “+” button is gone.

Can You help on this one?

Thanks a lot in advance!

#18

Hello @Finlando,

If you inquiry is related to the header, you can post it in your next reply. And if you have a different question, it is best that you create a new thread to prevent getting off topic. You can go here: https://theme.co/apex/forum/c/themeco/support
You should be seeing the plus sign to create anew topic.

Hope this helps.

#19

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