Vertical Padding In Main Nav Bar

Hi there,

I'm not sure I see what you mean.

Perhaps I'm not seeing the same thing you see displayed. I've checked the site and here's what I see on my end: https://share.getcloudapp.com/xQunnX47

As shown in the image, I don't see any "stretched" nav bar.

Perhaps you've yet to clear the browser cache of your device? Let us know.

Hi Elvin,

The issue is with the desktop view. Your screenshot shows the mobile view, which is okay.

Regarding the browser cache of my device, I've also viewed it on other devices and it shows the same "stretched" view. In other words, it looks like padding is being added to the bottom of the menu items.

Screenshot in editor:
https://share.getcloudapp.com/P8ukk44k

Screenshot when live:
https://share.getcloudapp.com/BluYY890

Ah I see. Thanks.

I've rechecked your site on desktop viewport and your site doesn't seem to be loading the embedded inline stylesheets generated from the customizer.

Something may be messing around with it.(usually, the caching plugin).

Can you try disabling all caching plugins to check? Let us know.

I disabled the WP Rocket cache and purged the Sucuri CDN cache. Am not seeing any change. What are you seeing at your end?

I disabled the WP Rocket cache and purged the Sucuri CDN cache. Am not seeing any change. What are you seeing at your end?

Your site seems to be using Autoptimize as well as shown here: https://share.getcloudapp.com/8LukkLjy

And I actually see what supposed to appear (10px left/right padding, 30px line-height) but what applies is the style.css default from the theme (20px left/right padding, 60px line-height).

Yes, I am using Autoptimize as well (using the recommended GP settings). I tried to replace it with WP Rocket but for some reason, WP Rocket broke the site when I tried to activate those same settings on WP Rocket. So I disabled them on WP Rocket and enabled them on Autoptimize. Messy, I know!

Am I right in saying your video screenshot shows my site being served from an Autoptimize cache? If so, that's news to me.

So what do you recommend? Are you saying the issue is originating from Autoptimize?

My bad. I actually forgot Autoptimize has a cache for JS and CSS optimised files. Sorry!

Have cleared Autoptimize cache, purged Sucuri cache and WP Rocket cache is still disabled.

No change though.

Am I right in saying your video screenshot shows my site being served from an Autoptimize cache? If so, that’s news to me.

No, It's breaking how the CSS is being served. Having 2 caching plugins is quite messy. It's even messier when both plugin are trying to aggregate/combine CSS.

1 plugin is enough to complicate things and 2 just makes it exponentially more complicated. Try using only 1 caching plugin and start w/ the CSS non combined/merged/aggregated.

Just to clarify. Only the Autoptimize plugin is trying to aggregate/combine CSS. These same settings are disabled in WP Rocket.

When I activated WP Rocket, my intention was to disable and delete Autoptimize. I disabled each Autoptimize setting one by one and activated them on WP Rocket one by one. Then I disabled the Autoptimize plugin. However, when I activated these equivalent settings on Wp Rocket, they broke the site.

So I had to disable these settings on WP Rocket and re-activate Autoptimize with the GP settings.

I'm at a loss as to why the same settings on WP Rocket broke the site, but are okay when controlled by Autoptimize... although from what you found, it's clear the Autoptimize settings are also breaking how the CSS is being served.

I don't know what else I can try.

The way I see it, my only option is to delete the Autoptimize plugin and live with terrible page loading speeds. Not a good option.

Any thoughts?

While it definitely is possible to use both, (Even WP Rocket has an article specifically for this here), something between the two plugins is messing up with the CSS precedence causing the embedded inline CSS of the theme to run to early.

That's actually why your site is using this CSS from the default/fallback style.min.css:

.main-navigation .main-nav ul li a {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 60px;
}

Instead of this CSS from the embedded inline css <style id="generate-style-inline-css">:

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 30px;
}

The way I see it, my only option is to delete the Autoptimize plugin and live with terrible page loading speeds. Not a good option.

You can try doing process of elimination with all possible configurations between the two and see what gives the best result.

You can try unchecking "Also aggregate inline CSS?" and/or "Save aggregated script/css as static files?" and see how it goes.

Thanks for your help Elvin, much appreciated. As you suggest, I'll go through the process of elimination again and see if I can solve this issue.

No problem. Hope you get your preferred results. :)