[Resolved] Autoptimize CSS error

[sjoerd89]

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

[Tom]

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/

[sjoerd89]

Oops i send 2 of the same screenshots: This is how it looks with the option on

View post on imgur.com

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.

[Tom]

How are you adding your custom CSS?

[sjoerd89]

Sorry for not responding, was on a little holiday.
I add my custom CSS in my style.css in my childtheme

[Tom]

Hmm, Autoptimize shouldn’t have any issues with that.

Out of curiosity, what happens if you exclude your child theme CSS from Autoptimize?

[sjoerd89]

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

[Tom]

Hmm, so there must be some sort of CSS conflict.

Any chance you can make the issue happen so I can inspect it?

[sjoerd89]

-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.

[David]

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.

[sjoerd89]

Just asked my host about this

[sjoerd89]

Asked my hosting about this, and they do not provide such a service. Will replicate this problem after work and hopefully timing will work 😉

[David]

No problem. We’ll keep an eye out for your update 🙂

[sjoerd89]

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.

[Tom]

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;
}

[Author]

Posts