Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 14, 2017 at 6:18 am #733453
    Sladestyle

    Hi,

    I have set the height of the header background on scroll to be 75px…which it needs to be. This appears to have caused an issue when using an anchor tag and scrolling to specific sections. The section being scrolled to partially slides under the header background by around 18px.

    An example can be seen here: http://52.91.143.244/resources/ If you use the top navigation and click on any of the 3 submenu links under Resources you will see that section scrolls up a little too far. This isn’t a huge issue on this page but looking at the design files it will be an issue going forward.

    Is there anything I can do to fix this?

    Thanks,
    Slade

    January 18, 2017 at 5:47 am #735107
    Ismael

    Hey Slade,

    Thank you for using Enfold.

    How did you set the height of the header? I checked the Header > Header Layout > Header Size option and it is currently set to “large”. Did you add any css modifications?

    Best regards,
    Ismael

    January 18, 2017 at 5:50 am #735109
    Sladestyle

    Hey Ismael! Thanks for responding.

    I used this css in the child-theme:

    .header-scrolled #header_main .container {
    height: 75px !important;
}

    I have a feeling this is causing the issue but not sure how to fix it. The client wants a slightly taller header area “when scrolled” than the default.

    Thanks!
    Slade

    January 22, 2017 at 10:25 am #736935
    Ismael

    Hi!

    Please remove the modification then go to the Header > Header Layout panel. Set the Header Size to “custom pixel value” then adjust the Header Custom Height settings.

    Best regards,
    Ismael

    January 22, 2017 at 10:45 am #736941
    Sladestyle

    Hi Ismael, doesn’t that give the ‘regular’ header a specific size? I need the ‘scrolled’ header to be a specific size.

    January 26, 2017 at 5:24 am #738706
    Ismael

    Hi!

    Yes, it will enable you to choose a specific height for the header. After setting the Header Size settings, a new option called Header Custom Height will display where you can select a specific pixel value.

    Best regards,
    Ismael

    January 26, 2017 at 8:36 am #738775
    Sladestyle

    Hi Ismael!

    I’m not sure we are on the same page. It is the shrinking scrolled header that is the wrong size.

    When I use the Header Custom Height and set it to 117px (the height of the header before you scroll) and then click an anchor tag it does the same thing…scrolls up too far. If I comment out .header-scrolled #header_main .container {height: 75px !important;} then the shrinking header is only 60px tall which is too short. I need it to be 75px tall.

    Does that make sense?

    Thanks!
    Slade

    January 30, 2017 at 4:51 pm #740281
    Andy

    Hi,

    you could try this plugin: https://wordpress.org/plugins/hash-link-scroll-offset/

    Best regards,
    Andy

    January 30, 2017 at 8:09 pm #740401
    Sladestyle

    Worked perfect! Thanks Andy!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Anchor tag not lining up with bottom of header’ is closed to new replies.