Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 27, 2018 at 9:02 pm #918634
    zohar2014

    Hello, I’ve added sticky mobile header to both of my websites (https://longislandinterventions.com and https://longislandintervention.com) using the following CSS:

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

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

    However both websites now have a varying degree of white space between where the header ends and content begins (see attached screenshots) How can i get rid of this white space, please? I’ve tried to make the “padding-top” CSS a smaller number (such as 80px) but it doesn’t help.

    View post on imgur.com

    View post on imgur.com

    • This topic was modified 6 years, 10 months ago by zohar2014.
    February 28, 2018 at 2:36 pm #919070
    Nikko

    Hey zohar2014,

    I see the problem seems to be caused by the sticky header, having the fixed position, can you try to add this css code also:

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

    Checked this with emulators and seems to work fine, let us know if this helps. :)

    Best regards,
    Nikko

    February 28, 2018 at 5:18 pm #919181
    zohar2014

    Thank you! this fixed the issue, but there is one more issue:

    The white space shows on all “sideways” horizontal smartphone views, is there a way to fix that please? Along with making the header widget a responsize size in sideways smartphone view. In all of my testing of sideways display the white space is still there and the header widget is overlapping the header. Thank you.

    View post on imgur.com

    March 1, 2018 at 5:27 am #919366
    Nikko

    Hi,

    You’re welcome, in your Quick CSS you should find this media query:

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

    below it, add this css code:

    #header #media_image-3 {
    top: 0;
}

#header #media_image-3 img {
    max-height: 70px;
    width: auto;
}

    Let us know if this helps :)

    Best regards,
    Nikko

    March 1, 2018 at 12:37 pm #919585
    zohar2014

    Thank you! this has fixed the header widget responsiveness/size in sideways mobile view. However, in all sideways view this white space is still there, is there any way to get rid of it?

    View post on imgur.com

    March 1, 2018 at 2:11 pm #919633
    Nikko

    Hi,

    I have modified your css code, and have replaced this code:

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

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

    to:

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

    Hope it’s all good. :)

    Best regards,
    Nikko

    March 1, 2018 at 3:35 pm #919693
    zohar2014

    Perfect!!! Nikko is the BEST!!! He needs a RAISE!!!

    March 2, 2018 at 7:50 am #920131
    Nikko

    Hi,

    LOL XD Thanks for the compliment, and it’s a pleasure to help you :) Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

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