[Resolved] Slideout Submenu width

[Ian]

Hi,

Where can I change the width of submenu items in the slideout offcanvas menu (or what css can I add) to match the parents so they don’t appear stacked?

Thanks

[David]

Hi there,

looks like you found a solution – let me know.

[Ian]

Hi David,

Thanks for the reply.

I haven’t found a solution for this issue yet, the issue isn’t visible in a browser but in the WP customizer, on a mobile device or using a site such as https://mobilemoxie.com/tools/mobile-page-test/ it is visible.

Regards,
Ian

[David]

I am seeing this CSS in your site but i cannot see where its coming from:

.main-navigation ul {
    padding-left: 10px;
    padding-right: 10px;
}

If you can’t remove it you can overwrite it:

@media(max-width: 768px) {
    .main-navigation ul {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

[Ian]

Hi David,

Thanks again for the reply.

I added the padding to prevent the button in the primary menu touching the edge of the screen, didn’t realise it would affect the slideout child items. I’ve changed it to

@media (min-width: 768px) {
.main-navigation ul {
padding-left: 10px;
padding-right: 10px;
}

seems to have done the trick.

Many Thanks 🙂

[David]

aah ok – glad to see that works 🙂

[Author]

Posts