[Resolved] Minor issue with mobile menu margin

[mkjj]

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. 🙂

[David]

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;
}

[mkjj]

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.

[David]

You’re welcome

[Author]

Posts