Title: Responsive submenu
Last modified: September 4, 2019

---

# Responsive submenu

 *  Resolved [focuswp](https://wordpress.org/support/users/focuswp/)
 * (@focuswp)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/)
 * Hello,
    My main menu submenu at the top of the page is quite long, I changed 
   the length and width of the container to the css code so that it fits and is 
   harmonious, which worked. But on mobile, the submenu does not fit in the page.
   Do you have a code to try to make this responsive?
 * Thanks for your help !
 * Here is the code of my submenu:
 *     ```
       .main-navigation .main-nav ul ul li a {
            box-sizing: content-box;
       width: 195%;
       padding-right:20px;padding :20px 20px;
       }
   
       .sub-menu,
       .sub-menu > li:last-child > a {
           box-sizing: content-box;
       width: 100%;
       padding-right:230px;
       }
       ```
   

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

 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11900358)
 * Hi there,
 * Try this instead:
 *     ```
       .main-navigation:not(.toggled) .main-nav ul ul li a {
            box-sizing: content-box;
           width: 195%;
           padding-right:20px;padding :20px 20px;
       }
   
       .main-navigation:not(.toggled) .sub-menu,
       .main-navigation:not(.toggled) .sub-menu > li:last-child > a {
           box-sizing: content-box;
           width: 100%;
           padding-right:230px;
       }
       ```
   
 * Let me know 🙂
 *  Thread Starter [focuswp](https://wordpress.org/support/users/focuswp/)
 * (@focuswp)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11904197)
 * Hello !
    Thank you Tom for the answer. I tried the code but it did not work. 
   I tried this code and I feel like it works :
 *     ```
       @media screen and (max-width: 768px) {.main-navigation .main-nav ul ul li a {
            box-sizing: content-box;
       width: 94%;
       padding-right:20px;padding :20px 09px;
       }}
   
       @media screen and (max-width: 768px) {.sub-menu,
       .sub-menu > li:last-child > a {
           box-sizing: content-box;
       width: 100%;
       padding-right:0px;
       }}
       ```
   
 * Other thing : on mobile, my site homepage moves, we can drag the site on the 
   left or on the right (this is not fixed page). This causes a change in the resolution
   of the site when turning the phone (vertical, horizontal). It no longer takes
   the whole screen. Do I have to look for the problem on the theme side? Because
   I’m looking for.
    Thank you for your lighting !
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11904655)
 * Hi there,
 * Any chance you can link me to your site so I can take a look? It’s likely that
   you have an element on the page that is too wide.
 * Let me know 🙂
 *  Thread Starter [focuswp](https://wordpress.org/support/users/focuswp/)
 * (@focuswp)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11908045)
 * Hello Tom,
 * Thank you for your message. I made some changes on my home page, and it improved
   the situation without settling it 100%. I give you the link of the site (this
   time it is the real site) : [https://ipsyturn.com](https://ipsyturn.com). But
   I do not think that’s the theme. It would be rather the construction on elementor
   I feel.
 * Thanks again 🙂
    -  This reply was modified 6 years, 8 months ago by [focuswp](https://wordpress.org/support/users/focuswp/).
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11908084)
 * Hi there,
 * Does it happen on a page that isn’t using Elementor?
 *  Thread Starter [focuswp](https://wordpress.org/support/users/focuswp/)
 * (@focuswp)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11908085)
 * All my pages are built with elementor. So I do not know if this happens without
   elementor.
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11910214)
 * Does it happen on all pages? What if you build a test page without Elementor?
 *  Thread Starter [focuswp](https://wordpress.org/support/users/focuswp/)
 * (@focuswp)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11911001)
 * I fixed the whole problem.
    The problem was only on 2 pages, especially the homepage.
   I eliminated the sections one by one until I found the trigger. And I readjusted
   the columns. Since then, it’s fully responsive, google analysis in support. I
   tested a page on my test site: [link](http://conseilspedagogiques.com/page-test/)
   And that is perfectly responsive. The page is stable. So the problem seemed to
   be on elementor and not the theme.
 * Other thing : a problem on a message I sent. I did not pay attention, I wrote
   directly the name of my site in link in a message above. Do you have the possibility
   as an author to put a link text type “link” rather than the name of the site ?(
   At the moment it is I can not edit anymore). Because it appears in the page google,
   and for referencing, I think it’s not too good (the topic discussed here having
   no relation to the subject of the site). If not, should I write to WordPress?
   Thank you
    -  This reply was modified 6 years, 8 months ago by [focuswp](https://wordpress.org/support/users/focuswp/).
    -  This reply was modified 6 years, 8 months ago by [focuswp](https://wordpress.org/support/users/focuswp/).
 *  Thread Starter [focuswp](https://wordpress.org/support/users/focuswp/)
 * (@focuswp)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11911092)
 * I specify that the page I tested on my test site was designed without elementor
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11911992)
 * I’m not able to edit replies here on WordPress.org, unfortunately. You can check
   with the moderators, but I’m not sure if they will do it or not.
 * Glad you figured out the issue 🙂
 *  Thread Starter [focuswp](https://wordpress.org/support/users/focuswp/)
 * (@focuswp)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11915847)
 * I inquired. It is impossible to delete a link if the reason is not extreme (insecurity,
   privacy problem, etc.). And this is not extreme. So I leave it like that. Anyway,
   thank you for the cooperation work.
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11915943)
 * No problem!

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

The topic ‘Responsive submenu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot.
   png)
 * GeneratePress
 * [Support Threads](https://wordpress.org/support/theme/generatepress/)
 * [Active Topics](https://wordpress.org/support/theme/generatepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/)

 * 12 replies
 * 2 participants
 * Last reply from: [Tom](https://wordpress.org/support/users/edge22/)
 * Last activity: [6 years, 8 months ago](https://wordpress.org/support/topic/responsive-submenu/#post-11915943)
 * Status: resolved