Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 5, 2019 at 11:33 am #1153950
    mofix

    Hi folks,
    I love Enfold and use it for all my clients. After the latest update I can’t figure out why the css I use don’t work any more regarding fixed header in mobile. The fixing is working, but the content comes under the header in all the pages in the site.
    This is the css I normally use that works on my other sites:

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

    I have also tried with margin-top, and also with 0 and with 100 and 200 px, but nothing helps regarding mobile view (I have iPhone 7+)
    Can you please help me?

    Here’s the url for the site I’m working on (soon the publish) http://falckagencies.com/ny/

    Thanks,
    KIndly regards, Mathilde

    November 9, 2019 at 8:48 pm #1155240
    Mike

    Hey mofix,
    Sorry for the late reply, and thanks for the link. It looks like your issue is with this css:

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

    It needs to be:

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

    If you can’t find the first code just try adding the second code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field.
    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    November 11, 2019 at 12:12 pm #1155552
    mofix

    Hi Mike,
    Thanks,now it works with this code:

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

    Have a great day! :-)
    Cheers, Mathilde

    November 11, 2019 at 12:38 pm #1155560
    Mike

    Hi,
    Thank you for sharing your solution, Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Error with sticky header mobile in new Enfold version’ is closed to new replies.