Mobile Full width submenu with overflow and scroll

Hey vin8tan!

Can you please post the link to your page?
Also, you can request such feature here – https://kriesi.at/support/enfold-feature-requests/

Best regards,
Yigit

Hi,

Please add following code to Quick CSS in Enfold theme options under General Styling tab

ul#menu-plu {
    width: 560px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Best regards,
Yigit

Hi!

It does do it on my end. Please add media queries to apply changes only on mobile

@media only screen and (max-width: 580px) {
ul#menu-plu {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; 
}}

Best regards,
Yigit

Hey!

No, to apply to them all, please change the code to following one

@media only screen and (max-width: 580px) {
.av-submenu-container ul {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; 
}}

Cheers!
Yigit

Hi,

The fullwidth submenu is not sticky on mobile phones.

That is the default behaviour of the full width submenu because “fixed” positioned elements are not handled consistently on mobile devices. If you want to make it scrollable, add this in the Quick CSS field:

@media only screen and (max-width: 767px) {
#top .av-submenu-container ul {
     white-space: nowrap;
     overflow-x: auto;
}
}

Remove this css code:

@media only screen and (max-width: 480px)
@media only screen and (max-width: 580px)
.av-submenu-container ul {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    position: fixed!important;
}

It’s a bit counter intuitive though because there is no indicator that it is scrollable. Please enable the button in the “Mobile Menu Display” settings.

Best regards,
Ismael

Hi,

Again, what i’m trying to fix is to get the submenu to stick to the top of the screen when users scroll through the page.

Fixed or sticky elements are not fully supported on mobile devices and the script that enables this on desktop view is not going to work properly on touch devices. Unfortunately, we won’t be able to help you with this. Please hire a freelance developer or contact codeable: http://kriesi.at/contact

If you want to test it, edit the css > shortcodes.css file, look for this css code around line 4405 then remove it:

.responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; }

This will enable the sticky submenu on mobile but there will be an issue with its position.

Best regards,
Ismael

Hi,

Please add this in the Quick CSS field.

#top .av-submenu-container:before {
    content: "";
    font-family: entypo-fontello;
    position: absolute;
    top: 30%;
    left: 5%;
}

#top .av-submenu-container:after {
    content: "";
    font-family: entypo-fontello;
    position: absolute;
    top: 30%;
    right: 5%;
}

Best regards,
Ismael

Hey!

We modified the code above. Please try it again.

Best regards,
Ismael

Hi,

@darnott75: The site returns a 504 gateway time out error. You should contact your hosting provider regarding the status of the site. For additional help, please kindly open your own thread.

Best regards,
Ismael