Magento and Varnish cache breaking menu

Question

I've got my Magento store setup at Siteground. I'm in the middle of setting up caching across the site. But as soon as Varnish cache is enabled the menu breaks. The css is somehow not applied. How do i remedy this problem?

Screenshot attached with before and after Varnish:

Varnish

Answer 1

One cause can be you are running your website over HTTPS. When using varnish over port 80 Magento will load HTTP by default. Resulting in mixed content.

i.e.: your browser load the website in HTTPS with HTTP css files

to fix this add the following code in your vcl

sub vcl_recv {
set req.http.X-Forwarded-Proto = "https";
set req.http.X-Forwarded-Port = "443";
}