Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 26, 2018 at 7:37 pm #917939
    longhi118

    Is it possible on Enfold to make the navigation menu sticky on mobile so that the hamburger menu is shown?

    February 26, 2018 at 8:35 pm #917970
    Verdaccio

    This is a solution that Moderator Victoria gave to me on that. Hope it works for you as well. :)

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header {
    position: fixed;
    }
    }

    February 26, 2018 at 8:51 pm #917987
    longhi118

    That did make the menu sticky. Thank you!

    One follow up question, though. On mobile the header covers the hero slider up. I have left the code on for reference – http://lightfoundation.bammarketingagency.com/

    • This reply was modified 6 years, 9 months ago by longhi118.
    February 26, 2018 at 8:57 pm #917997
    Verdaccio

    I suspect this might do it. Again, code by Victoria:

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

    February 27, 2018 at 7:55 am #918255
    Victoria

    Hi longhi118,

    Looks fine on my end. Did the code above help you?


    @Verdaccio     Thank you for sharing! :)

    Best regards,
    Victoria

    February 27, 2018 at 6:40 pm #918584
    longhi118

    Thank you for reaching out Victoria! The code works in getting the header to stay fixed on mobile but it changed several other css components. i.e. the header font is now different.

    February 27, 2018 at 7:37 pm #918609
    Jordan Shannon

    Hi,

    It looks like a bracket was left off the code. Please try the following:

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

    Best regards,
    Jordan Shannon

    February 27, 2018 at 8:19 pm #918627
    longhi118

    Unfortunately it doesn’t. If i change the padding number I do see it adjust the items beneath the header appropriately but the header isn’t fixed.

    March 1, 2018 at 8:00 am #919440
    Vinay

    Hi,

    We have tested this code on your site. Please clear the cache by refreshing the browser a few times to view the changes.

    To make the header sticky in mobile please use the below code

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    position: fixed;
}
.responsive #top #main {
    padding-top: 131px !important;
}
}

    Best regards,
    Vinay

    March 1, 2018 at 11:01 pm #919998
    longhi118

    Vinay, the code you provided did the trick! Thank you!

    March 1, 2018 at 11:15 pm #920002
    Jordan Shannon

    Hi,

    I’m glaf Vinay’s suggestion was able to help. If you need anything else, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Sticky Header On Mobile’ is closed to new replies.