Top margin on mobile only

The easiest/best way is to simply disable the functionality for smaller screens by entering a value for the “Do not stick element when screen smaller than” setting in the plugin’s Settings screen.

Please let me know if that works for you!

Thanks for quick reply
But you take me wrong..
I actually want sticky menu on both screens (desktop and mobile).
But i want sticky menu on desktop with top margin 60px.
And i also want want sticky menu on mobile with top margin 0px.

Please suggest

My mistake!

The plugin doesn’t directly support that, so the only workaround I can think of is to add some CSS and media queries. Something like this (change the value for the width and the sticky element):

@media screen and (min-width: 480px) {
    .the-element {
         margin-top:60px;
    }
}

Where i should add to try this code? I mean in theme’s style css, ubermenu’s css or your plugin’s css?

Please help

I would put in the style.css, because if you put it in the plugin’s CSS, it will get overwritten when you there’s a new update.

Unluck!!!
Its not working

I will need to see your site in order to be able to help you further. Can you share a link?

i’m working on localhost. our website is not live yet.

I’m sorry, but without seeing the site itself, I’m unable to see what the problem could be and therefore not able to help solve the issue. ??

give me some time i’m trying to make test demo site to checkout the problem

check test.cgfrog.com

It looks like the site is using two different methods to make things sticky. This may not be the best approach.

I’ll focus on the part that’s above the menu (the black bar that currently says “Latest” and “Popular”) since that is where you’ll apply my plugin.

I don’t see the code I suggested placed in style.css:
https://test.cgfrog.com/wp-content/themes/blackmag/style.css

But try this instead: in the plugin settings, set “Space between top of page and sticky element” to 60, and add this code to your style.css file.

@media screen and (min-width: 480px) {
   .cloned {
      margin-top:0 !important;
   }
}

If you’ve done that, and it still doesn’t work, let me know and make sure the code is present on your test site so I can see it.

I’ve add as you given code but problem is exist.

I don’t see the code anywhere in styles.css: https://test.cgfrog.com/wp-content/themes/blackmag/style.css

Are you using a caching plugin perhaps?

Also, I made a small mistake in the code. This is what it should be:

@media screen and (min-width: 480px) {
   .cloned {
      top:0 !important;
   }
}

i’ve added this code to style.css at the end.
now problem is swapped.
now this code is working for mobile but not on desktop, desktop 60px is gone.
i want 0px margin on mobile and 60px margin on desktop view.
i’m using WP-Optimize plugin.

please suggest