Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 24, 2019 at 9:05 pm #1121729
    peernet

    We have added the css below globally to our website, but it is creating issues for a page where we have used a fullwidth sub menu block with internal links. With the code below active, the scroll is glitchy when you select a menu item. In addition, even though the anchor is above each of the headers, when you select a menu item, you end up with the top of the page below the header. Before the code below was added, there was a smooth scroll when you select a menu item. I suspect that the double smooth scroll is creating some sort of conflict, but we want the smooth scroll added globally for other anchor behaviors. We have the same issue with the anchor location with and without the that target code active.

    The code below is working correctly on all other pages.

    html {
    scroll-behavior: smooth;
    }

    :target {
    display: block;
    position: relative;
    top: -160px;
    visibility: hidden;
    }

    I have provided links to pictures in the private section. I cannot provide login credentials as this work is being done on a uat site.

    July 28, 2019 at 10:15 pm #1122583
    Mike

    Hey peernet,
    Sorry for the late reply, thanks for the images, since we can not examine your site I tried to recreate your issue on my localhost but using your css above with sub-menus seemed to work after adjusting the top px for my page, although there seemed to be a lag between clicking the anchor link and the smooth scroll effect.
    replacing the “id” in the anchor with “name” solved this lag and using a slightly different css landed on the anchor correctly even though I placed the anchor below the target on the page, when I place the anchor above the target no css was needed other than the smooth scroll.
    I see that you already tried moving the anchor, so please try this anchor:

    <a name="gogo"></a>

    and this css:

    html {
scroll-behavior: smooth;
}

*[name]:before 
{ 
  display: block; 
  content: " "; 
  margin-top: -190px; 
  height: 190px; 
  visibility: hidden; 
}

    Best regards,
    Mike

    July 29, 2019 at 8:48 pm #1122925
    peernet

    Thank you, that worked!

    July 30, 2019 at 4:53 am #1123037
    Rikard

    Hi,

    Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    July 30, 2019 at 2:11 pm #1123146
    peernet

    You can close the topic.

    July 30, 2019 at 11:36 pm #1123364
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘"Fullwidth Sub Menu" with internal links creates scroll and anchor conflicts’ is closed to new replies.