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
I unchecked the button for now so the menu is prevalent.
-
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
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
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
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
I hope I understood what you mean:
view-source:http://www.madisongaragerepair.com/wp-admin/options-general.php?page=autoptimizeno, 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>.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-comfrank
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
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 defaultfrank
Thank you for the answer. How is the code should look like, and where exactly should I place it? (the adjustMenu)
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
It works! Thank you very much. I downloaded a text widget and pasted the code in it.
great! π
if you have a second, could you mark AO 2.0.2 as working with WP 4.5.1 (if you’re on that version, at least)?
and if you’re _really_ happy, you might even consider writing a review? π
frank
Will do!
The topic ‘Optimize CSS Code’ is closed to new replies.