Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1312264

    Hi team,

    I have a Fullwidth Sub Menu on one of my website pages, works perfectly on desktop but on mobile there is a gap between the top of the screen and where the sticky menu starts. You can see this on the page: https://bobbiecharles.com.au/price-list/

    Please let me know if there’s some Quick CSS or other solution that can fix the problem.

    Thanks

    #1312986

    Hey oladigital_co,

    Thank you for the inquiry.

    The full width sub menu is not supposed to stick on mobile view or on smaller screens. Did you modify the script files? You can use this css code to adjust its position.

    #top .header-scrolled-full + #main .av-submenu-container.av-sticky-submenu {
        top: 0 !important;
    }

    Best regards,
    Ismael

    #1321956

    Hi,
    could you provide us with the css code to keep the submenu fixed on mobile?
    I would like to leave the submenu visible at the top when scrolling the page.
    Thanks in advance.

    #1321963

    but you have to think of – if it is good to have the submenu open – in this case the content has only 1/6 height of the whole screenheight on f.e. mobile phones !
    So : why no second burger instead: https://webers-testseite.de/transparent-header/

    try:

    @media only screen and (max-width: 989px) {
      .responsive #top #wrap_all #header .container {
        width: 90%;
        max-width: 90%;
      }
       
      #header {
        position: fixed !important;
        height: 80px !important;
        max-height: 80px !important;
      }
      
      .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
        background-color: transparent;
      }
      
      .responsive #top .av-logo-container ,
      .responsive #top .logo a,
      .responsive #top .logo img {
        height: 80px !important;
        max-height: 80px !important;
      }
      
      .responsive #top .av-main-nav .menu-item-avia-special a {
        height: 80px !important;
        line-height: 80px !important;
      }
      .responsive.html_mobile_menu_tablet.html_header_top #top #main {
        padding-top: 80px !important;
      }
    }
    

    ___________ off topic __________

    this is the only way i found to have sticky submenus on mobile and even with transparent header and sticky header !
    see: https://webers-testseite.de/transparent-header/
    https://kriesi.at/support/topic/how-to-make-the-submenu-sticky-on-mobile/#post-1225108

    But there is a lot to do: have some child-theme alb elements ( the menu.js and to ensure loading the child-theme menu-js – the menu.php too )
    and this is the reason for the trouble in menu.js:

    if( burger_menu.is(":visible") ){
    	this.css({top: 'auto', position: 'absolute'}); fixed = false;
    	return;
    }
    #1322140

    Hi,

    Thanks for sharing and helping out @guenni007 :-)

    Best regards,
    Rikard

    #1322171

    thanks for your help @guenni007

    #1322186

    the values must be adjusted – f.e. if there is a header_meta – the code above goes to @oladigital_co

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.