Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 31, 2021 at 12:29 am #1291473
    adamskicr

    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.

    big blanck space

    Thank you,
    Krzysztof Adamski

    • This topic was modified 3 years, 7 months ago by adamskicr.
    April 3, 2021 at 5:34 am #1292042
    Rikard

    Hi 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,
    Rikard

    April 5, 2021 at 6:50 pm #1292592
    adamskicr

    Hello 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: The problem

    As it shoud be: As it shoud be

    Thank you,
    Krzysztof Adamski

    April 7, 2021 at 1:32 am #1292951
    Ismael

    Hi,

    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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.