[Resolved] I restored my site from backup then some customized CSS started creating issues

[moy]

I restored my site due to “500 internal server error”. After that weird things started happening with all the customized CSS options.

After restoring a backup, I applied all the CSS which I was able to add with the help of the support team.

I have a full-width navigation bar with padding on both left side and right side.

1) The customised hamburger option on the left side of the navigation bar has changed into a weird small box (before restoration, it was a normal hamburger icon)

2) When I was customizing the site, sometimes the weird box I mentioned above (hamburger icon) turns into a blue coloured box and sticks to the left edge of the screen in the navigation bar. After refreshing the page, it returns back to its allocated position (which was assigned with the help of CSS padding on the left side).

– This changing of location from the screen edge to the “allocated position in Custom CSS padding” is only happening during customization. I don’t mind it as long as this weird behaviour doesn’t happen with the live website but it is kind of annoying.

3) And I checked the option “site identity as header” when I was customizing navigation bar. But whenever I visit my website, the site identity jumps to the middle of the navigation bar and goes back to its allocated position within a blink of an eye.

4) I have set the site identity header colour into #ff4e00 but it sometimes changes into #747274 automatically.

I tried disabling the W3 total cache, Jetpack, Cloudflare. Even that didn’t solve all these issues.

HOOKS I HAVE USED INSIDE NAVIGATION BAR –

<span class=”slideout-toggle”></span>

ALL THE CSS I HAVE USED IN THE SITE TILL NOW –

li.slideout-toggle {
display: none !important;
}
span.slideout-toggle {
order: -1;
margin-left: 30px;
}
span.slideout-toggle a:after {
content: ‘MENU’;
margin-left: 10px;
}
span.slideout-toggle a {
color: #747274;
}
span.slideout-toggle a:hover {
color: #092327;
}
#mobile-header .menu-toggle {
order: -1;
margin-right: auto;
}
#mobile-header .navigation-branding {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin-left: 0;
}

@media (min-width: 769px) {
span.slideout-toggle {
padding-right: 30px;
}
}
.main-navigation .inside-navigation {
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, .2);
}

[David]

Hi there,

1. The missing hamburger icon. Go to Customizer > General and ensure the Icon Type is font.
2. The Customizer uses JS to render changes in the preview – and it can be a bit glitchy so nothing i would overly worry about.
3. The logo is jumping around because of the lazy loader plugin. Exclude the logo images from lazy loading to resolve.
4. Not able to replicate that – sounds like possible the Cache plugin is messing with CSS order.

[moy]

Thank you very much for your support… how much time Did it take you to learn front end web designing? I think It is dumb to depend on the support team, every time I need to adjust minor modules. So I like to learn web development.

[David]

You’re welcome.
Web design is a never ending learning process. And the way GP does things is quite specific. So a lot of these things come from practice, or searching these forums or asking us direct questions 🙂

[moy]

then, I am going to keep troubling you with my silly questions until I learn to do it myself.

By the way, the issues I mentioned above has been solved, but when I tried to do it my self, I discovered that no matter what settings I am applying, I am unable to improve GTmetrix result of :-
1) leverage browsing caching
2) Add expires header
3) use cookie-free domain
4) reduce DNS lookups.

I know it’s NOT a generatepress issue & generatepress is perfectly fine, but It will be helpful if you could give me some pointers to improve these. Will I be able to improve the with any Plugin?

currently, I am using – w3 total cache, a3 lazy load, Cloudflare, jetpack, smush image compression, generateblocks, lightweight social icons, google analytics, wp forms, yoast SEO.

I heard that Cloudflare uses extra cookies for security purpose, so I think using a cookie-free domain is not possible. I can create a separate subdomain for cookies but then it’s useless because Cloudflare uses cookies for security (especially for malicious BOTs).

I tried installing “far future expiry header” but then I was getting ‘500 internal server error” on my wp-admin and my website. So, in the end, I had to restore my site.

I don’t know what to do to improve the above mentioned options in GTmetrix.

[David]

Those metrics are related to 3rd party requests such as Google fonts, Translate etc.
Which without a lot of effort, there isn’t anything you can do to change that apart from removing them.

Out of the 47 requests the site is making, 6 of them are google fonts. Reducing them and removing unused font variants might be something you want to review.

[moy]

okay, if most of them are related to third-party requests. then it is useless to work in it. I’ll just try to reduce google fonts.

Your suggestion is helpful, thank you very much again.

[David]

You’re welcome

[Author]

Posts