Title: Sub-menus on mobile with TT3
Last modified: July 30, 2023

---

# Sub-menus on mobile with TT3

 *  [jamesross03](https://wordpress.org/support/users/jamesross03/)
 * (@jamesross03)
 * [3 years ago](https://wordpress.org/support/topic/sub-menu-55/)
 * Hi,
 * I’m currently developing a site for a client using the twenty-twenty three theme(
   perhaps a bad choice) but have managed to get everything all sorted apart from
   an issue with the navigation menu on mobile.
 * There is one sub-menu in the nav menu (the parent item is not a page itself, 
   just a header that groups the two pages in the submenu). However, when viewing
   on mobile, the submenus are automatically expanded? 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 have looked into alternative menu plugins but haven’t managed to find anything
   that’ll interface easily with the rest of the site without having to purchase
   a subcription.
 * 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.
 * Many thanks.
    -  This topic was modified 3 years ago by [jamesross03](https://wordpress.org/support/users/jamesross03/).
      Reason: mistake in title

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Felipe Velzani](https://wordpress.org/support/users/felipevelzani/)
 * (@felipevelzani)
 * [3 years ago](https://wordpress.org/support/topic/sub-menu-55/#post-16936690)
 * 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](https://d.pr/i/gtSXqX), you could add
   an RGB color with transparency ([find a color here](https://rgbacolorpicker.com/)).
 * Example: `rgb(214 54 56 / 85%)` (the 85% is the transparency)
 *  Thread Starter [jamesross03](https://wordpress.org/support/users/jamesross03/)
 * (@jamesross03)
 * [3 years ago](https://wordpress.org/support/topic/sub-menu-55/#post-16939021)
 * 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.
 *  [Felipe Velzani](https://wordpress.org/support/users/felipevelzani/)
 * (@felipevelzani)
 * [3 years ago](https://wordpress.org/support/topic/sub-menu-55/#post-16940075)
 * Hi [@jamesross03](https://wordpress.org/support/users/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.
 *     ```wp-block-code
       /* 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-code
       .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
           background-color: rgb(214 54 56 / 85%);
       }
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Sub-menus on mobile with TT3’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentythree/1.6/screenshot.
   png)
 * Twenty Twenty-Three
 * [Support Threads](https://wordpress.org/support/theme/twentytwentythree/)
 * [Active Topics](https://wordpress.org/support/theme/twentytwentythree/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentythree/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentytwentythree/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)
 * [sub-menu](https://wordpress.org/support/topic-tag/sub-menu/)

 * 3 replies
 * 2 participants
 * Last reply from: [Felipe Velzani](https://wordpress.org/support/users/felipevelzani/)
 * Last activity: [3 years ago](https://wordpress.org/support/topic/sub-menu-55/#post-16940075)
 * Status: not resolved