Sub-menus on mobile with TT3

Hi there,

Is there any way, CSS or otherwise, I can change this to be more like when the menu is viewed on a larger display and there is an arrow next to the header to click and open the submenu??

I don’t think it would be possible to do with only some small CSS, and it would likely need some code changes to work this way.

Changing to a theme that already works like that is generally a good idea.

Also would be keen to know if there is any advice for making the background of the menu modal a semi-transparent colour? Have tried to override the CSS but to no-avail.

Do you mean on the mobile menu background?

If you would like something like that, you could add an RGB color with transparency (find a color here).

Example: rgb(214 54 56 / 85%) (the 85% is the transparency)

Thank you! Editing JS isn’t too much of a dealbreaker for me, if it is possible, but just couldn’t find whereabouts in the theme files any of the code for the menu was?

Alternatively is there any way I could atleast hide the heading for the submenu on mobile, as there’s no point in displaying it if it’s just going to be open anyway?

With regards to mobile menu background, that’s exactly what I meant! Couldn’t previously see an option for rgba though in the visual editor (just standard RGB) and I couldn’t get a CSS override to work – will try again later.

Hi @jamesross03,

Editing JS isn’t too much of a dealbreaker for me, if it is possible, but just couldn’t find whereabouts in the theme files any of the code for the menu was?

The reason that you can’t find it is that Twenty Twenty-Three uses the “default” format from the Site Editing functionality, so it would require a theme that overrides it.

I will actually check a few more options and get back to you to confirm if it is still not possible.

Alternatively is there any way I could atleast hide the heading for the submenu on mobile, as there’s no point in displaying it if it’s just going to be open anyway?

I see your point here. An option would be using CSS to do that. I created something that should do that.

/* Remove parent menu on mobile modal */

.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    padding-left: 0;
    padding-right: 0;
}

.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
    gap: 24px;
}

.has-modal-open .has-child .wp-block-navigation-item__content {
    display: none;
}

.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
    padding-top: 0;
}

You can use this CSS at least temporarily while I check for other options.

With regards to mobile menu background, that’s exactly what I meant! Couldn’t previously see an option for rgba though in the visual editor (just standard RGB) and I couldn’t get a CSS override to work – will try again later.

You’re right — my mistake! I checked directly on the browser, but now I see the Editor still doesn’t allow it for some reason.

Anyway, here is the CSS for that:

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgb(214 54 56 / 85%);
}