Burger Menu Won't Close

[fikasem]

Hey there,

I just noticed that the burger menu won’t close on mobile view for 2 of my sites:

https://usitunesgiftcards.com/
https://usitunesgiftcards.se/

Tested for plugin conflict but that didn’t do anything. Any idea what could be wrong?

Thanks,
Ann

[ruenel]

Hello Ann,

Thanks for writing in! I have checked your two sites and it seems that you are having a caching issue. Since you are using CloudFlare, please login to your CloudFlare account and purge your site cache. For best results, make sure that you are using the recommended CloudFlare settings when working with X or Pro theme. Please check this out: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/

Please let us know how it goes.

[fikasem]

Thanks for the quick reply!

I’m not using Cloudflare for either site. I use WP Performance Score Booster though but tried to deactivate it and that didn’t help.

Any other ideas?

[ruenel]

Hello There,

One of your site is using CloudFlare. Please check out the screenshots in the secure note.

Would you mind providing us some access to your site so that we can investigate further?

Thanks.

[fikasem]

The screenshots won’t load on my end. I assume it is the .se domain? Must be something the host is doing that I am not aware of. Will send login in secure note.

Thanks for looking into it!

Ann

[paul.r]

Hi,

We have just release a new version.

Please update to the follwing version and see if that fixes the issue.

X 6.1.2
Cornerstone 3.1.2

Don’t forget to clear plugin and browser cache after the update.

Thanks

[fikasem]

I did the updates but issue is still there

[alexander]

I’ve taken a look and this appears to be related to caching. You have X and Cornerstone updated, but your site is not providing the latest javascript from Cornerstone. It’s still serving a stale cached version of the file.

[fikasem]

I was able to figure it out on both sites… but now I’m stuck with a center aligned mobile button on this site https://usitunesgiftcards.com/. Do you know how to fix that?

Thanks!
Ann

[thai]

Hi Ann,

Did you mean the cart menu item?

Please try adding this custom CSS under Theme Options > CSS:

div#x-nav-wrap-mobile .wpmenucart-display-right {
    float: none !important;
    margin: 0 auto;
    display: block;
    max-width: 160px;
    text-align: center;
}

Hope it helps

[fikasem]

No, not the cart menu, the mobile burger menu. Is it not centered on your end on mobile device?

[paul.r]

Hi Ann,

I checked and it appears centered on my end.

Try to clear your browser cache and check again.

Thanks

[fikasem]

I don’t want it centered, I want it aligned to either side

[Prasant]

Hello @fikasem,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS to align hamburger menu:

@media only screen and (max-width: 600px) {
    .masthead-stacked .x-btn-navbar {float: right;}

}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[fikasem]

Thanks!

I do know how to edit CSS… and although this does work, I can see that the burger initially is centered and then jumps to the side with the CSS added. The Swedish version of this site is built the exact same way, same settings, plugins, design etc. and the burger menu there float to the side immediately as it should. Still feel like something is messed up with this menu…

[rad]

Hi @fikasem,

I don’t see any jumping, it’s aligned to left the moment it loads. The issue would happen if the styling is added through javascript since it loads and executes later than CSS.

It could be a cache, please try clearing its browser cache and test it again.

Thanks!