Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 17, 2020 at 11:01 pm #1253540
    Courtney

    Hi guys!

    #1) The Sticky Menu (on Mobile and iPad) is hiding a portion of the content at the very top of the website. The Sticky Menu on Desktop is working fine, however, the sticky the Sticky Menu on Mobile and iPad is hiding content at the very top of the website.

    A quick way to see this: The Breadcrumbs on pages show up normally on Desktop – but the Breadcrumbs are hidden (underneath the Sticky Menu) on Mobile + iPad so that tells us the Sticky Menu is covering actual content at the top of the pages (for Mobile + iPad) and not working properly.

    *How do I fix this? I’ll share all of the CSS code I have in the Private section so you can see if something looks off?

    #2) How do I make the Burger Menu show sooner? I would like the Burger Menu to start showing at iPad Pro size (1024X1366).

    October 19, 2020 at 6:24 am #1253801
    Rikard

    Hey Courtney,

    1. This CSS is applying on your site:

    @media only screen and (max-width: 767px) {
.responsive #top #main {
    padding-top: 0 !important;
    margin: 0;
}
}

    I’m not sure where it’s added though since you have file compression active. If you need help finding it then please turn that off under Enfold->Performance.

    2. Please try this CSS:

    @media only screen and (max-width: 1370px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Best regards,
    Rikard

    October 19, 2020 at 6:18 pm #1254119
    Courtney

    Hey!

    Thank you for looking into this for me! I added more information in the Private Section because there might be some conflicting CSS?

    • This reply was modified 4 years ago by Courtney.
    October 21, 2020 at 4:36 am #1254525
    Rikard

    Hi,

    Thanks for that. I edited this in your Quick CSS box:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
      margin-top: 50px;
  }
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
    top: 0;
  }
}

    And the breadcrumbs are showing on tablet sizes again after that. Please review your site.

    Best regards,
    Rikard

    October 21, 2020 at 5:12 pm #1254708
    Courtney

    Thank you so much!

    For the Burger Menu (to show up sooner), should I copy-paste the code you provided earlier in this thread and put it into Quick CSS?
    Just want to make sure I’m keeping Quick CSS clean and not duplicating things.

    @media only screen and (max-width: 1370px) {
    nav.main_menu {
    display: block !important;
    }
    #avia-menu .menu-item {
    display: none;
    }
    .av-burger-menu-main.menu-item-avia-special {
    display: block;
    }
    }

    October 23, 2020 at 7:12 am #1255154
    Rikard

    Hi,

    Yes, please try pasting that into the Quick CSS box. I tried logging into your site to check if it’s already there, but the login page didn’t load for some reason.

    Best regards,
    Rikard

    October 23, 2020 at 8:13 pm #1255332
    Courtney

    Hey!

    I added some info. in the Private Section so you can see exactly what’s going on in my Quick CSS right now.

    I didn’t paste it the new code in yet so you can see if anything would conflict if I add the new code to Quick CSS.

    October 26, 2020 at 7:36 am #1255631
    Rikard

    Hi,

    Thanks for that. I don’t think anything should conflict with the existing code, please try pasting it in the Quick CSS box to see if it works or not.

    Best regards,
    Rikard

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