Archived topic
Autoptimize CSS error
19 replies · Started by sjoerd89 on December 27, 2018
Hi there,
hope you all had a nice christmas. I want to use Autoptimize to speed up my website but somehow when i use the optimize CSS option, my website logo and menu navigation break. Not sure why this might be. I think this is the CSS that i use for the logo and menu:
.main-navigation .sticky-logo {
position: absolute;
left: 10px;
top: 00;
height: 55px;
z-index: 10;
}
.main-navigation .sticky-logo img {
height: 105px;
padding-top: 20px !important;
}
.main-navigation .main-nav > ul > li.menu-item-has-children>a,
.secondary-navigation .main-nav > ul > li.menu-item-has-children>a {
background-color: #14377d;
padding-right: 0px;
padding-left: 10px;
border-right: solid #2d71ba;
clip-path: polygon(100% 0, 100% 65%, 85% 100%, 0 100%, 0 0);
width: 134px;
line-height: 25px;
text-align: left;
}
.main-navigation .main-nav > ul > li > a {
background-color: #14377d;
padding-right: 0px;
padding-left: 10px;
border-right: solid #2d71ba;
clip-path: polygon(100% 0, 100% 65%, 85% 100%, 0 100%, 0 0);
width: 134px;
line-height: 25px;
text-align: left;
}
.main-navigation ul ul {
width: 100%;
text-align: left;
}Here is how it looks without autoptimize : https://imgur.com/Yi8NyXI
Here is how it looks with autoptimize: https://imgur.com/Yi8NyXI
Any clue what i am doing wrong?
Thanks,
Sjoerd
Hi there,
Those screenshots look the same?
Can you make sure your Autoptimize settings look the same as what we have here?: https://generatepress.com/fastest-wordpress-theme/
Oops i send 2 of the same screenshots: This is how it looks with the option on
https://imgur.com/xmnvlF9
I had the same options as your website but changed one option off as in "aggregate all linked CSS-files?"
If i take that one off my website looks the same.
How are you adding your custom CSS?
Sorry for not responding, was on a little holiday.
I add my custom CSS in my style.css in my childtheme
Hmm, Autoptimize shouldn't have any issues with that.
Out of curiosity, what happens if you exclude your child theme CSS from Autoptimize?
Looks like it will not have any problems if i add this to my Exclude CSS from Autoptimize:
wp-content/themes/generatepress-child/style.css
Hmm, so there must be some sort of CSS conflict.
Any chance you can make the issue happen so I can inspect it?
-edit
bit hard to open the issues with our timezones i think otherwise the site will look weird for a long time. I could do this tonight after work we have less people visiting the site then.
Hi there,
does your host provide a Staging server option? You could then make the change on the staging server, provide us that link with the conflict and it won't effect your live site.
Just asked my host about this
Asked my hosting about this, and they do not provide such a service. Will replicate this problem after work and hopefully timing will work ;)
No problem. We'll keep an eye out for your update :)
I have removed ": , wp-content/themes/generatepress-child/style.css from the autoptimize now and the error occured again. Will keep this on for a while so you can maybe see what is going wrong.
It's strange, usually Autoptomize does a great job of maintaining the order of CSS, but it's not in your case.
To fix it, make your CSS a little more specific.
For example, replace this:
.main-navigation .main-nav > ul > li > a {
background-color: #14377d;
padding-right: 0;
padding-left: 10px;
border-right: solid #2d71ba;
clip-path: polygon(100% 0,100% 65%,85% 100%,0 100%,0 0);
width: 134px;
line-height: 25px;
text-align: left;
}With this:
nav.main-navigation .main-nav > ul > li >a {
background-color: #14377d;
padding-right: 0;
padding-left: 10px;
border-right: solid #2d71ba;
clip-path: polygon(100% 0,100% 65%,85% 100%,0 100%,0 0);
width: 134px;
line-height: 25px;
text-align: left;
}