Title: Optimize CSS Code
Last modified: August 31, 2016

---

# Optimize CSS Code

 *  Resolved [palpulla](https://wordpress.org/support/users/palpulla/)
 * (@palpulla)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/optimize-css-code/)
 * Hello,
 * When I check the Optimize CSS Code button and load my website, the top menu disappears.
 * Can you help me out with the issue, please? My website address is [http://www.madisongaragerepair.com](http://www.madisongaragerepair.com)
 * I unchecked the button for now so the menu is prevalent.
 * [https://wordpress.org/plugins/autoptimize/](https://wordpress.org/plugins/autoptimize/)

Viewing 13 replies - 1 through 13 (of 13 total)

 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313814)
 * hard to tell without seeing the actual problem. can you share a (link to a) screenshot
   of the broken page and a link to (a copy of) the autoptimized CSS-file used in
   the broken page?
 * frank
 *  Thread Starter [palpulla](https://wordpress.org/support/users/palpulla/)
 * (@palpulla)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313942)
 * Thanks for the reply. Attached are screen shots of the website before and after
   I check the box “Optimize CSS Code”
 * Before I check the box- [](http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.45.56-PM.png)
 * Autoptimize after I check the box- [](http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.46.38-PM.png)
 * The main page without the menu bar- [](http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.47.00-PM.png)
 *  Thread Starter [palpulla](https://wordpress.org/support/users/palpulla/)
 * (@palpulla)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313943)
 * I don’t know why it didn’t post the links, I’ll try again:
 * Before I check the box- [http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.45.56-PM.png](http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.45.56-PM.png)
 * Autoptimize after I check the box- [http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.46.38-PM.png](http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.46.38-PM.png)
 * The main page without the menu bar- [http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.47.00-PM.png](http://www.madisongaragerepair.com/wp-content/uploads/2016/04/Screen-Shot-2016-04-26-at-4.47.00-PM.png)
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313947)
 * I would also need the contents (or a copy) of the autoptimized CSS-file when “
   optimize CSS” is active palpulla. you can mail it to me at futtta-at-gmail-dot-
   com. Alternative would be to temporarily break your website (a non production-
   version) so I could see this happening.
 * frank
 *  Thread Starter [palpulla](https://wordpress.org/support/users/palpulla/)
 * (@palpulla)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313961)
 * I hope I understood what you mean:
    view-source:[http://www.madisongaragerepair.com/wp-admin/options-general.php?page=autoptimize](http://www.madisongaragerepair.com/wp-admin/options-general.php?page=autoptimize)
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313962)
 * no, sorry, that’s not it.
 * try the following steps:
    1. activate CSS optimization 2. go to the homepage 
   of your site 3. tell your browser to show the HTML source of that homepage 4.
   look for [http://madisongaragerepari.com/wp-content/cache/autoptimize/css/autoptimize_<semi-random-string&gt](http://madisongaragerepari.com/wp-content/cache/autoptimize/css/autoptimize_<semi-random-string&gt);.
   css in that HTML source and click on the link (if there are two, repeat this 
   and the next step) 5. copy/paste the the resulting CSS in an empty text-file 
   and save it (repeat this if you have multiple autoptimized CSS-files in your 
   HTML source) 6. mail the file(s) with copy/pasted CSS to futtta-at-gmail-dot-
   com
 * frank
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313978)
 * thanks for the CSS palpulla. does the problem go away when you uncheck the “inline&
   defer”-option (so if you leave the autoptimized CSS in head normally)?
 * frank
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313979)
 * as per you other thread the problem indeed only occurs when you have “inline &
   defer” active. the problem is that the nav is made visible by javascript, but
   your deferred CSS means the styles get applied afterwards.
 * I see 3 solutions:
    * not using “inline & defer” (as you didn’t add critical 
   CSS anyhow) * call the “adjustMenu();” function to force the nav to be seen after
   the CSS was applied * add `.nav {display:block !important;}` to your CSS (or 
   in a style block in a widget) to make the navigation visible by default
 * frank
 *  Thread Starter [palpulla](https://wordpress.org/support/users/palpulla/)
 * (@palpulla)
 * [10 years ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313980)
 * Thank you for the answer. How is the code should look like, and where exactly
   should I place it? (the adjustMenu)
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313981)
 * well, the challenge is to make sure it only fires when the deferred CSS is actually
   loaded, so there’s some trickery involved, but try to add this snippet of JS 
   in a text widget (if you enter a title or other text, it’ll be invisible).
 *     ```
       <script>window.addEventListener('DOMContentLoaded',inject_adjustmenu_js,false);function inject_adjustmenu_js(){window.setTimeout(adjustMenu,500)};</script>
       ```
   
 * this will trigger the adjustMenu JS 500ms after the deferredCSS function was 
   called.
 * let me know how that works out for you 🙂
 * frank
 *  Thread Starter [palpulla](https://wordpress.org/support/users/palpulla/)
 * (@palpulla)
 * [10 years ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313982)
 * It works! Thank you very much. I downloaded a text widget and pasted the code
   in it.
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313984)
 * great! 🙂
 * if you have a second, could you [mark AO 2.0.2 as working with WP 4.5.1](https://wordpress.org/plugins/autoptimize/#compatibility)(
   if you’re on that version, at least)?
 * and if you’re _really_ happy, you might even consider [writing a review](https://wordpress.org/support/view/plugin-reviews/autoptimize#postform)?
   🙂
 * frank
 *  Thread Starter [palpulla](https://wordpress.org/support/users/palpulla/)
 * (@palpulla)
 * [10 years ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313985)
 * Will do!

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Optimize CSS Code’ is closed to new replies.

 * ![](https://ps.w.org/autoptimize/assets/icon-256X256.png?rev=2211608)
 * [Autoptimize](https://wordpress.org/plugins/autoptimize/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/autoptimize/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/autoptimize/)
 * [Active Topics](https://wordpress.org/support/plugin/autoptimize/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/autoptimize/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/autoptimize/reviews/)

## Tags

 * [above the fold](https://wordpress.org/support/topic-tag/above-the-fold/)

 * 13 replies
 * 2 participants
 * Last reply from: [palpulla](https://wordpress.org/support/users/palpulla/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/optimize-css-code/#post-7313985)
 * Status: resolved