[Resolved] Hide element settings on custom screen resolution

[Eeva Lamminen]

Hi,

I’m developing a woocommerce website that is using a hero Element on desktop. I have an issue with mobile menu transparency on tablet size screens that seems to be related to the element settings on specific screen size.

On desktop I’m using a transparent menu, colors etc. based on the settings I’ve made to the element. The menu changes into normal sticky menu with white background (+ etc. settings I’ve given in Customizer) menu when scrolling down. Sticky menu works as it should overall. So all this is fine on desktop.

Mobile menu breakpoint is set to 1025px in Customizer and that also works as it should, the mobile menu is used according to this setting.

The issue is the change into mobile menu on tablet and on smaller laptop screens. In this screen size the menu is still transparent even though I’ve set the hero element to be hidden on all screens under 1025px. The hero element has css class hideonmobile.

@media (max-width: 1025px) {
    .page-hero.hideonmobile {
        display: none;
    }

I’d need the mobile menu to have a white background (and using the other normal menu settings I’ve given it in Customizer) already on screens under 1025px but above 768px.

The menu works on screens under 768px as I’ve set it to work, with a white background.

To me it seems that the hero element is somehow overriding the mobile menu settings on this particular screen size.

I’m using GP Premium 1.11.3 and Elementor 3.0.5 and Elementor Pro 3.0.3. Unfortunately my website is in development stage and thus hidden. I can provide user details in private if needed.

Can you give me any tips on how to solve this?

Thanks already in advance!

[David]

Hi there,

would you be able to provide us a Login or remove the coming soon so i can take a look?

You can send the Login details via the Account Issue form:

https://generatepress.com/contact/

Please include the URL for this topic.

[Eeva Lamminen]

Hi David,
I sent you the credentials with the account form.

[Tom]

Hi there,

The page hero checks to see if we’re not on mobile when using the desktop merge option.

Try adding this filter:

add_filter( 'generate_not_mobile_media_query', function() {
    return '(min-width: 1025px)';
} );

Let me know 🙂

[Eeva Lamminen]

Hello,
The filter solved the problem.
Thank you very very much!

[Tom]

You’re welcome! 🙂

[Author]

Posts