Archived topic

padding for mobile menu

5 replies · Started by anabella on April 19, 2018

Viewing posts 1–6 of 6

April 19, 2018 at 3:35 am #554550

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!

April 19, 2018 at 9:46 am #554930

Hi there,

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

Let me know.

April 19, 2018 at 1:44 pm #555121

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!

April 19, 2018 at 8:42 pm #555297

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.

April 20, 2018 at 10:13 am #555885

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

Thanks

April 20, 2018 at 10:54 am #555932

Awesome :)

This archived topic is closed to new replies.

Start building better websites today.