Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 26, 2021 at 2:13 am #1312264
    oladigital_co

    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

    July 28, 2021 at 10:26 am #1312986
    Ismael

    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

    September 22, 2021 at 8:46 pm #1321956
    fulvio

    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.

    September 22, 2021 at 10:24 pm #1321963
    Guenni007

    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;
}
    September 24, 2021 at 7:25 am #1322140
    Rikard

    Hi,

    Thanks for sharing and helping out @guenni007 :-)

    Best regards,
    Rikard

    September 24, 2021 at 10:11 am #1322171
    fulvio

    thanks for your help @Guenni007

    September 24, 2021 at 11:51 am #1322186
    Guenni007

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

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