I was trying to create a semi transparent header (before scrolling) instead of a non transparent header. The only thing I found in the forums to create this was the CSS code
@media only screen and (min-width: 1001px) {
html body #header-outer[data-transparent-header="true"].transparent {
background-color: rgba(0,0,0,0.6)!important;
}
}
When I put in this CSS it seems to have fixed the issue but I don't have control over how semi transparent the header is - and there are also some errors in the CSS that I don't understand.
Error in line 2 says "unqualified attribute selectors are known to be slow"
Error in line 3 says "fallback background color (hex or RGB) should precede RGBA background color. Use of !important"
Was there away to do this without CSS coding? What are these Errors.
These are not exactly an error, but more of a warning. So ignoring them will be fine. The warning on line 2 comes from the use of attribute selector (the one inside []). Besides, the selector is overqualified as using #header-outer ID selector would do as well.
As for the warning on line 3, it comes from the usage of rgba value. I don't really understand why it can't process rgba value, however, you can get around this by using hex code (#000) and opacity: 0.6 instead. The use of !important, on the other hand, will appears a warning in most custom CSS field in wordpress to prevent the theme's CSS code to be overridden by mistake. However, since that's what we want to actually do, it's fine to just leave it there.
Actually, Salient actually includes a slider to adjust the header's background opacity. Please go to Salient > Header Navigation > Logo and General Styling and scroll down to see slider next to 'Header BG Opacity' like so:
I was trying to create a semi transparent header (before scrolling) instead of a non transparent header. The only thing I found in the forums to create this was the CSS code
@media only screen and (min-width: 1001px) {
html body #header-outer[data-transparent-header="true"].transparent {
background-color: rgba(0,0,0,0.6)!important;
}
}
When I put in this CSS it seems to have fixed the issue but I don't have control over how semi transparent the header is - and there are also some errors in the CSS that I don't understand.
Error in line 2 says "unqualified attribute selectors are known to be slow"
Error in line 3 says "fallback background color (hex or RGB) should precede RGBA background color. Use of !important"
Was there away to do this without CSS coding? What are these Errors.
Hi there,
Thank you for reaching out to us.
These are not exactly an error, but more of a warning. So ignoring them will be fine. The warning on line 2 comes from the use of attribute selector (the one inside []). Besides, the selector is overqualified as using #header-outer ID selector would do as well.
As for the warning on line 3, it comes from the usage of rgba value. I don't really understand why it can't process rgba value, however, you can get around this by using hex code (#000) and opacity: 0.6 instead. The use of !important, on the other hand, will appears a warning in most custom CSS field in wordpress to prevent the theme's CSS code to be overridden by mistake. However, since that's what we want to actually do, it's fine to just leave it there.
Actually, Salient actually includes a slider to adjust the header's background opacity. Please go to Salient > Header Navigation > Logo and General Styling and scroll down to see slider next to 'Header BG Opacity' like so:
Hope this answers your question.
Best regards.
Hi again,
Thank you for reaching out to us.
You can move the container up so it covers the gap by adding the following code
.container-wrap, .project-title{ margin-top: -90px; }Hope this helps.
Best regards.