Tagged: Fullwidth sub menu, not responsive
-
AuthorPosts
-
March 31, 2021 at 12:29 am #1291473
Hello,
In my site cafekracovia.com/menu i have used a -Fullwidth sub menu- element and it does not work on mobil devices. I found a solution in another thread by using this code to fix it to the bottom.
@media only screen and (max-width: 767px) { #top .av-submenu-container { position: fixed !important; bottom: 0 !important; z-index: 5000 !important; top: auto !important; } }
Now I get two problems
1. There is a big blank space in the original submenu position like i show in the image below.
2. When I touch a submenú link it navagates to well but it anchors in the middle of the screen instead of the top of the screen as it should be.Thank you,
Krzysztof Adamski- This topic was modified 3 years, 8 months ago by adamskicr.
April 3, 2021 at 5:34 am #1292042Hi Krzysztof,
Thanks for the screenshot. I’m not sure exactly what you are looking to achieve though, could you try to explain that bit further please?
Best regards,
RikardApril 5, 2021 at 6:50 pm #1292592Hello Rikard,
Thanks for your reply. I am looking to achive two things.
1. Eliminate the blank space between the first color section and the second color section as it is shown on the image above (the problem is only in mobile device)
2. When navagating in a mobile device with the ‘fullwidth sub menu’ the element scrolls to the middle of the screen. I want to achive that it scrolls and anchors to the top of the screen as it is in a bigger screen. I will attach an image to illustrate the problem and a second image to show how it showd be (the problem is only in mobile device)
As it is:
As it shoud be:
Thank you,
Krzysztof AdamskiApril 7, 2021 at 1:32 am #1292951Hi,
Thank you for the inquiry.
The fixed or sticky submenu option for the fullwidth submenu element is actually disabled on mobile devices by default.
If checked the menu will stick at the top of the page once it touches it. This option is ignored when burger menu icon is shown
Have you tried setting the menu so that it switch to an icon on mobile view? Look for the Advanced > Responsive > Mobile Menu Display settings and select the second option.
Setting it fixed is actually not helping because the submenu is taking more than a third of the device screen covering most of the content, and it looks distracting, IMO. If you really need it fixed, please try this css code to pull the content below the submenu upwards.
#top .sticky_placeholder { margin-top: -255px; }
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.