CSS loading in the body rather than the head

Nevermind…I found some other posts about css loading and many suggested just having a separate css for plugins included with my theme that loads after everything else. I will try that first.

Hi eheine,

The styles don’t load in the head because the styles are only loaded on pages where the menu is rendered. In most cases, that can’t be determined until too late during the page load to load the styles in the head.

Since most people will only need the menu styles on 1 or 2 pages of their site, this prevents users’ browsers from making an extra round trip for a useless stylesheet.

However, I’ve used CSS styles with very low specificity so that they can be overwritten by using a rule with more specifity. If you add an attribute selector like [id^="fdm-menu-"] in front of your CSS rules, you should be able to override any of the other styles that are set. For instance, if you wanted to target the price wrapper, .fdm-item-price-wrapper, you’d use [id^="fdm-menu-"] .fdm-item-price-wrapper.

If you’re pretty confident you’ll only ever have one menu on a page at once, you can use the slighly more performant #fdm-menu-1 selector in place of [id^="fdm-menu-"].

If you have any specific rules you can’t get working, post them here and I can probably give you something that will work.

You can do that, but I always recommend cutting down on the number of different CSS files retrieved where possible. Although the files themselves may not be a lot to download, on slow connections (like 3g mobiles) simply making an extra round trip to the server to retrieve an extra file can add to your overall load time.