Tagged: , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • June 10, 2024 at 9:45 pm #1448815
    joshuati

    Hi,
    I need to keep the full menu as is on mobile, not switch to the burger menu. I would also like it to stick on top of the page, like the phone number, on the desktop page.
    It is a way for me to increase sales by letting the BOOKING menu be visible at all time.
    please help.
    Alexandre

    June 11, 2024 at 5:05 am #1448862
    Ismael

    Hey joshuati,

    Thank you for the inquiry.

    This is possible, but there won’t be enough space for the menu items. We may need to decrease the size of the logo or the font size of the menu items. If that is acceptable, you can start with this css code:

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top .av-main-nav .menu-item-avia-special {
    display: none;
  }

  .responsive #top .av-main-nav .menu-item {
    display: inline;
  }

  .responsive .logo img,
  .responsive .logo svg {
    margin: 0;
    max-height: 40px !important;
    margin-left: -20px;
  }
}

    Best regards,
    Ismael

    June 11, 2024 at 9:59 am #1448877
    joshuati

    Hi Ismael,
    is it possible to make it sticky? because the menu is not sticky now.
    When I scroll down the menu is disappearing.
    Thank you.

    June 11, 2024 at 12:38 pm #1448894
    Rikard

    Hi,

    Please try adding this as well inside of the media query posted by Ismael.

    
.header-scrolled #header_main {
  position: fixed;
  width: 100%;
  background: black;
  top: 0;
}

    Best regards,
    Rikard

    June 11, 2024 at 2:31 pm #1448898
    joshuati

    Hi Rikard,
    I tried but it has no effects, sorry.
    Alexandre

    June 11, 2024 at 8:30 pm #1448926
    Rikard

    Hi,

    Does your full code block look this now?

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top .av-main-nav .menu-item-avia-special {
    display: none;
  }

  .responsive #top .av-main-nav .menu-item {
    display: inline;
  }

  .responsive .logo img,
  .responsive .logo svg {
    margin: 0;
    max-height: 40px !important;
    margin-left: -20px;
  }

  .header-scrolled #header_main {
    position: fixed;
    width: 100%;
    background: black;
    top: 0;
  }
}

    Best regards,
    Rikard

    June 12, 2024 at 9:33 am #1448975
    joshuati

    Yes, it’s exactly that, and it still doesn’t work, sorry.

    June 12, 2024 at 10:28 am #1448984
    Ismael

    Hi,

    Thank you for the update.

    There was an extra curly brace in the Quick CSS field, making the code invalid. We removed the curly brace and temporarily disabled the Enfold > Performance > File Compression settings. Please make sure to purge the cache before checking the page.

    Best regards,
    Ismael

    June 12, 2024 at 10:33 am #1448986
    joshuati

    Hi Ismael,
    I tried on all the mobiles I got home, even with using the different navigator and purging, it still doesn’t stick :(

    June 12, 2024 at 11:01 am #1448989
    Guenni007

    Can you make the link to your site public? I will then try to create a CSS for you.
    I have also implemented the sticky header on my test page. Link

    June 12, 2024 at 11:03 am #1448990
    joshuati

    http://www.lazerfloor.com

    June 12, 2024 at 11:10 am #1448991
    Guenni007

    the point is that on emulators ( developer tools of all my desktop browsers ) your mobile menu is sticky and fullwidth on screen width less than 767px.

    But on a real mobile device, the header scrolls out of the screen.

    It is hard to check – because on most cases – the css rules to make are built with dev tools.

    …

    June 12, 2024 at 11:26 am #1449001
    Guenni007

    between 768 and 989px – do you like to have a burger or a full menue too?
    header_meta – should scroll away or stay visible too?

    June 12, 2024 at 11:30 am #1449004
    joshuati

    I want the menu always visible. No burger. Because it is targeted at our customers, to book on their phone, tablet…..
    So the logo/menu/phone should stay there. Like your site.

    June 12, 2024 at 12:20 pm #1449018
    Rikard

    Hi,

    I’ve edited the CSS for you, please review your site.

    Best regards,
    Rikard

    June 12, 2024 at 3:27 pm #1449067
    joshuati

    thank YOU!

    June 12, 2024 at 4:36 pm #1449083
    Mike

    Hi,
    Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘I need my full menu on mobile’ is closed to new replies.