[X theme] Hiding topbar on mobile devices: CSS not working outside Theme options preview

[spidermonkeydp]

I had some CSS to hide the topbar on mobile devices (max-width 979x). This has been in place for a year or so and has been working.

I upgraded to X theme version 6.1.6. When I view the site on a mobile device the topbar and its content is visible, i.e. the CSS I added is not hiding the topbar.

Within the theme options preview area of X theme, the CSS to hide the topbar is working. That is what is strange.

Can anyone help me make sure that the topbar is hidden on mobile devices?

[mldarshana]

Hi There @spidermonkeydp

Thanks for writing in! Upon checking, I see that you have few licenses. Could you please provide us with the URL to your site, so that we can look into your issue.

Before doing that, please check with the following.

1. You need to update both X theme and Cornerstone plugin so that it will be compatible after updating. You can check the latest version numbers from here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195).

2. You need to clear style cache through X -> Settings section, after updating your site.

3. If you’re using a caching plugin, make sure to purge your server cache after updating your site.

4. If you’re still having issue, switch to your parent X theme and see if you’re experiencing any issues with your child theme.

5. Make sure that you’re running at least PHP v5.6.x on your server to avoid incompatibility issues.

Let us know how it goes.
Thanks!

[spidermonkeydp]

Thanks. I have check all the points you state above. The problem still persists.

The licence and site I am referring to is beth-shalom.org.uk

Thanks for your help.

[jade]

Hi there,

This code should remove the topbar on mobile:

@media (max-width: 480px) {
    .x-topbar {
        display: none;
    }
}

Please copy all the codes that you have in the Global CSS here to check if there is any CSS error that might be causing the codes not to work: http://csslint.net/

Hope this helps.

[spidermonkeydp]

The additional CSS worked. And using CSS Lint I noticed that an error had somehow crept into the code. I corrected it and all is fine now.

Thanks for your support.

[jade]

You’re most welcome.