[Resolved] Autoptimize CSS error

Home Forums Support [Resolved] Autoptimize CSS error

Home Forums Support Autoptimize CSS error

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #766473
    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

    #766835
    Tom
    Lead Developer
    Lead Developer

    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/

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

    #767893
    Tom
    Lead Developer
    Lead Developer

    How are you adding your custom CSS?

    #771744
    sjoerd89

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

    #772244
    Tom
    Lead Developer
    Lead Developer

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

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

    #772788
    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

    #773221
    Tom
    Lead Developer
    Lead Developer

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

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

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

    #775032
    David
    Staff
    Customer Support

    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.

    #775053
    sjoerd89

    Just asked my host about this

    #775097
    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 😉

    #775136
    David
    Staff
    Customer Support

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

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

    #775471
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.