Responsive submenu

Resolved focuswp
(@focuswp)

3 years, 9 months ago
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
(@edge22)

3 years, 9 months ago
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
(@focuswp)

3 years, 9 months ago
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
(@edge22)

3 years, 9 months ago

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
(@focuswp)

3 years, 9 months ago
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. 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 3 years, 9 months ago by focuswp.
Theme Author Tom
(@edge22)

3 years, 9 months ago

Hi there,

Does it happen on a page that isn’t using Elementor?

Thread Starter focuswp
(@focuswp)

3 years, 9 months ago

All my pages are built with elementor. So I do not know if this happens without elementor.

Theme Author Tom
(@edge22)

3 years, 9 months ago

Does it happen on all pages? What if you build a test page without Elementor?
Thread Starter focuswp
(@focuswp)

3 years, 9 months ago
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
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 3 years, 9 months ago by focuswp.
- This reply was modified 3 years, 9 months ago by focuswp.
Thread Starter focuswp
(@focuswp)

3 years, 9 months ago

I specify that the page I tested on my test site was designed without elementor

Theme Author Tom
(@edge22)

3 years, 9 months ago

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
(@focuswp)

3 years, 9 months ago

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
(@edge22)

3 years, 9 months ago

No problem!

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

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

Views