Archived topic

Minor issue with mobile menu margin

3 replies · Started by mkjj on October 13, 2020

Viewing posts 1–4 of 4

October 13, 2020 at 12:41 am #1486122

I have to make some minor changes on the mobile menu for small displays so that the burger menu is below the logo. This is not a problem at all. I have a minor issue with a 10px left margin in the navigation-branding-min.css of the GP premium plugin:

.navigation-branding, .site-logo.mobile-header-logo {
    display: flex;
    align-items: center;
    order: 1;
    margin-right: auto;
    margin-left: 10px;
}

I would have to use !important in my child theme CSS to override it. I would rather avoid this. Alternatively, I could put it in the customizer CSS. While this is perfectly fine, I'm not a big fan of splitting CSS between the customizer and the child theme.

Could you recommend a best practice solution?

This question might sound a little bit nerdy, but GP deserves best practices in each and every detail. :-)

October 13, 2020 at 2:36 am #1486248

Hi there,

you would need to make your CSS more specific, you can do this by adding a parent element class to your selector eg.

.main-navigation .navigation-branding, .main-navigation .site-logo.mobile-header-logo {
    margin-left: 0;
}

October 13, 2020 at 2:57 am #1486292

Ah, of course. That's the way to do it. I usually try to keep my CSS not more specific than needed. But that's a good solution in this case.

Thanks for the great support.

October 13, 2020 at 4:54 am #1486500

You're welcome

This archived topic is closed to new replies.

Start building better websites today.