[Resolved] padding for mobile menu

[anabella]

Hello,

I´m working on my menu and I´d like to set special padding for mobile version.

I´m currently using the following additional CSS, which works great for desktop, but this padding is too much for mobile.

.inside-navigation {
padding-bottom: 5px;
padding-left: 22px;
padding-right: 22px;
padding-top: 17px
}

.main-navigation.navigation-stick .main-nav ul li a {
padding-left: 22px;
padding-right: 22px;
padding-top: 0px;
padding-bottom: 5px
}

Thanks!

[Leo]

Hi there,

This should help: https://docs.generatepress.com/article/responsive-display/

Let me know.

[anabella]

Hello Leo,

Thanks, but I´m not talking about the breakpoints. I´m having problem with the margin below the menu. Please see https://www.anabellapapucci.com/inicio on mobile version.

Thanks a lot!

[Leo]

You can add media query for the CSS you’ve added so that it’s desktop only:

@media (min-width: 769px) {
    .inside-navigation {
        padding-bottom: 5px;
        padding-left: 22px;
        padding-right: 22px;
        padding-top: 17px
    }

    .main-navigation.navigation-stick .main-nav ul li a {
        padding-left: 22px;
        padding-right: 22px;
        padding-top: 0px;
        padding-bottom: 5px
    }
}

Then have a set of CSS for mobile like this:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}

Let me know if this helps.

[anabella]

Thanks Leo.
It didn´t work, but I applied a negative margin on the first Elementor section and now it looks good.

Thanks

[Leo]

Awesome 🙂

[Author]

Posts