CSS to reduce mobile columns down to one column

Hi David,

Please can you post a screenshot showing where I need to be looking? I see your main menu but that does not have any columns in the sub menu.

Regards,
Tom

Hi Tom,

Here are a couple of screenshots in desktop and mobile formats. As you can see, in the mobile as I’ve fudged the mobile breakpoint to maintain the menu buttons in one horizontal line, the text below is still in 2 columns,
which is ilegible.

David

• This reply was modified 2 years, 8 months ago by david615734.

Not sure those came through so just reposting

https://www.ciudadesporlabicicleta.org/staging/wp-content/uploads/2022/07/Screenshot-2022-07-21-at-15.02.18.png

https://www.ciudadesporlabicicleta.org/staging/wp-content/uploads/2022/07/Screenshot-2022-07-21-at-15.01.40.png

Hi David,

Thanks. Please try adding this under Mega Menu > Menu Themes > Custom Styling:

@include mobile {
    #{$wrap} #{$menu} li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-6-of-12 {
        width: 100%;
    }
}

Regards,
Tom

Hi Tom,

Thanks for you response. This didn’t resolve the issue but I figured out a workaround so thanks for all your help.