I have been adjusting colors in custom.css for several days now. Sometimes it's working, but then it disappears again. Can I get help with your templates? I'm not a beginner, but this tops everything

I made a custom.css in the folder css, this is my css, but it is not working!!!!! How can i in this template compile CSS?

//knoppen social media laten werken op smartphone en tablets//

sppb-addon-wrapper-3d5bbec3-2307-42e9-9902-0f66d5f74fe1,

sppb-addon-wrapper-349cbe32-bc13-4b12-9a8e-4b60f308366c {

z-index: 9;

}

//achtergrondkleur header en hoogte header//

sp-header {

background: #000000;
height: 95px;

}

sp-header.header-with-modal-menu {

color: #252525;
height: 95px;

}

sp-header.header-with-modal-menu a {

color: #af9462;

height: 95px; } .fa-solid, .fas, [class*=" icon-"], [class^=icon-] { color: #af9462; } //kleur streepjes bij offcanvas// .burger-icon>span { background-color: #af9462; }

sp-header.header-with-modal-menu a:hover {

color: #85724d;

} //kleur menu-items offcanvas//

modal-menu .sp-megamenu-parent>li:hover>a, #modal-menu .sp-megamenu-parent>li:hover>span, #modal-menu .sp-megamenu-parent>li.active>a, #modal-menu .sp-megamenu-parent>li.active>span {

color: #af9462;

} //kleur afsluitkruisje bij offcanvas// .offcanvas-active .burger-icon>span, #modal-menu-toggler.active .burger-icon>span { background-color: #af9462; }

Hi

Thanks for contacting us. Could you please give me your super admin access? So that I can check.

-Regards.

Hi.

First. Use this button to provide the code.

I'm not a beginner

This is not an argument. Your code does not work because it contains:

1. Incorrect selectors. For example should be #sp-header but not sp-header
2. Perhaps not understanding of the layout on your part, which leads to the inoperability of the code as z-index: 9; in your context
3. For some things, the use of !important may be required.
4. Incorrect syntax for comments. Should be /*...*/, but not //...//

Resume - the reason is only your code and nothing else. Browser Dev Tools will always tell you the reason for the inoperability of the code.

hello this code i got from joomshaper support: 'Perhaps not understanding of the layout on your part, which leads to the inoperability of the code as z-index: 9; in your context' Because the social media icons where not working on the home-page

Why do i need to use !import? where do i need to use it and where not?

I tried both: #sp-header or sp-header

I will change the comments syntax

I'm using notepad++ to write or paste the code

I also want to change the height of the header, but it is not working - and I used the template options

i tried again with other syntax like you told me, but still the same problems. nothing is changing

/*knoppen social media laten werken op smartphone en tablets*/
#sppb-addon-wrapper-3d5bbec3-2307-42e9-9902-0f66d5f74fe1, 
#sppb-addon-wrapper-349cbe32-bc13-4b12-9a8e-4b60f308366c {
    z-index: 9;
}
/*achtergrondkleur header en hoogte header*/
#sp-header {
    background: #000000;
  height:75px;
}
#sp-header.header-with-modal-menu {
    color: #252525; 
}
#sp-header.header-with-modal-menu a {
    color: #af9462;
}
#fa-solid, .fas, [class*=" icon-"], [class^=icon-] {
    color: #af9462;
}
/*kleur streepjes bij offcanvas*/
#sp-header .burger-icon>span {
    background-color: #af9462;
}

I just want to change some colors in custom.css and it is already more then 2 weeks that i'm working on it. No result and during the week no support!

I just want that the social media icons will work, no result .......

See hidden content

I just want to change some colors in custom.css and it is already more then 2 weeks that i'm working on it. No result and during the week no support!

I am not an employee of support. If you could provide a public link, I could help you to save your time

Ok, sorry i thought you where an employee of joomshaper

webdesign-caroline.eu

Cache is off, compression css files is off, compress javascript is off, compile scss to css is off. After a few hours most of the colors seems to work, but the social media bottons are not working on smartphone.

last week you gave me:

#sppb-addon-wrapper-3d5bbec3-2307-42e9-9902-0f66d5f74fe1, 
#sppb-addon-wrapper-349cbe32-bc13-4b12-9a8e-4b60f308366c {
    z-index: 9;
}

But I changed the layout, and now the social media buttons are not working anymore. I must change the z-index again?

Height of header is not working when i'm using the options of the template, only when i use a height in custom.css

this is my custom.css again

/*knoppen social media laten werken op smartphone en tablets*/
#sppb-addon-wrapper-3d5bbec3-2307-42e9-9902-0f66d5f74fe1, 
#sppb-addon-wrapper-349cbe32-bc13-4b12-9a8e-4b60f308366c {
    z-index: 9;
}

/*achtergrondkleur header en hoogte header*/
#sp-header {
    background: #000000;
  height:75px;

}
#sp-header.header-with-modal-menu {
    color: #252525;

}

#sp-header.header-with-modal-menu a {
    color: #af9462;

}
.fa-solid, .fas, [class*=" icon-"], [class^=icon-] {
    color: #af9462;
}
/*kleur streepjes bij offcanvas*/
.burger-icon>span {
    background-color: #af9462;
}
#sp-header.header-with-modal-menu a:hover {
    color: #85724d;
}
/*kleur menu-items offcanvas*/
#modal-menu .sp-megamenu-parent>li:hover>a, #modal-menu .sp-megamenu-parent>li:hover>span, #modal-menu .sp-megamenu-parent>li.active>a, #modal-menu .sp-megamenu-parent>li.active>span {
    color: #af9462;
}
/*kleur afsluitkruisje bij offcanvas*/
.offcanvas-active .burger-icon>span, #modal-menu-toggler.active .burger-icon>span {
    background-color: #af9462;
}

#sp-header {
    background: #000000;
  height:75px;

This does not require the code. Header height includes a number of other parameters, but not only the Header height itself. Therefore, it is better to configure through the template.

So, in order for the settings of the template to work and at the same time you can use CSS code, your configuration should be this:

1. Cache off
2. Compression css files off
3. Compress javascript off
4. Compile scss to css should be ON - it is from this that the settings of the template are working. When you ON this Header settings start to work. Turn it off only after the end of development.

#sppb-addon-wrapper-3d5bbec3-2307-42e9-9902-0f66d5f74fe1, 
#sppb-addon-wrapper-349cbe32-bc13-4b12-9a8e-4b60f308366c {
    z-index: 9;
}

If you have changed the layout, then the addons IDs have changed too. Therefore, the code does not work. Set z-index in both addons (Advanced tab) instead of CSS code. Your current layout allows you to use this settings in addons as far as I see.