Avada Forums Community Forum Sticky header hiding menu anchor points

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • njgage
    Participant
    Post count: 1

    Hi,

    I’m using a sticky header and have some menu anchor points throughout a particular page. When you click on the link it takes you to the anchor point but the content goes to the top of the page and the sticky header then covers the content. I would expect that the height of the sticky header is taken into account so that the content appears directly below the header and not underneath. It’s working fine on mobile (as the sticky header does not show) so that tells me the anchors are working ok generally.

    Anyone else seen this and have a solution?

    Thanks,
    Nick

    pzangardi
    Participant
    Post count: 3

    I’m having this same issue. Did you find a solution?

    wizard247
    Participant
    Post count: 5

    I would like the same. I found several JS solutions on other forums but they seem to have no effect on Avada.

    pzangardi
    Participant
    Post count: 3

    OK so on Avada you have to add an underscore after the # and before the anchorpoint in the URL, like this:

    http://someurl.com/#_anchor

    This will drop the anchor below the sticky menu.

    gbonk
    Participant
    Post count: 1

    I’ll be damned, this worked by adding the underscore between the ‘#’ and the tag. Note, that this does NOT work if the page is already loaded and you’re just appending the tag. I had to close the tab and paste in the URL in a new window.

    cdegourcy
    Participant
    Post count: 2

    I’ve the same issue, did you find a solution ? I’d like to make anchor to navigate in my current page (as a one page).

    cdegourcy
    Participant
    Post count: 2

    Dear all,

    I’m using “Menu anchor” in my container as first element and I’ve add this rules to my CSS :

    
    div.fusion-menu-anchor
    {
        position: absolute;
        visibility: hidden;
        top: -127px;
    }
    

    Where 127px is the height of my header.

    It’s not really clean, but it’s work with me.

    lpblue
    Participant
    Post count: 3

    The #_ANCHOR solution did not work for me, and I can’t use the CSS suggested either. Does anyone else have a fix for this?

    Doktorkos
    Participant
    Post count: 2

    Hey guys,

    i was trying like 2 days to fix that problem with this anchor and the “sticky header AND FOUND OUT HOW IT WORKS…hope this will help other people too 🙂

    EXAMPLE SCENARIO – a blogpost

    Lets imagine i have a structure in the beginning of my post and want to add links that scroll down to the text passage below…

    MY EXAMPLE STRUCTURE:

    1.test

    2.test1

    3.test2

    Step 1:

    Find the Container with the exact TEXTPASSAGE you want to add your anchor…for a example a textfield in your blog (the container where you want to scroll down)…go into settings of that container and find “Name Of Menu Anchor”

    Now type a name in: for example: my-anchor . (without # before…just the text)

    Step 2:

    Now go back to your structure in the beginning and go into EDITING your text…
    mark now for example the field test1

    Step 3: now you will see in the text toolbar above the “coloured themefusion icon” its called fusion builder element generator…click on it and search for the Element “one page text link” and open it…

    Step 4:
    Now you will se a field called “Name of Anchor”…THERE you have to type in again your tag…in our example its my-anchor BUT NOW with a # before… so in our example it will be #my-anchor

    Step 5: Finished! Hope you got it 🙂

    Have a nice day!

    inga44
    Participant
    Post count: 1

    I found the answer here: https://theme-fusion.com/documentation/avada/pages/anchor-scrolling/
    added the class to the element I am linking from, and it works.

    maxonline
    Participant
    Post count: 4

    @cdegourcy – I tried your solution, true, is not very clean, but it works fine and it’s a simple solution everyone can use.
    Thank you for sharing
    You can see it in action here:
    https://massimobasso.com/partire-per-gli-stati-uniti-le-cose-importanti-da-sapere/

    Max

    marklchaves
    Participant
    Post count: 873

    Yes, @cdegourcy solution is a nice one.

    If setting the Name of the Menu Anchor in Fusion Builder or using @cdegourcy ‘s code doesn’t work, I found this works for my case.

    
    /* From Adrian Garner on Stack Overflow */
    /* https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors */
    :target::before {
        content: "";
        display: block;
        height: 162px; /* Fixed header height for this page. */
        /* margin: -100px 0 0; Negative fixed header height if needed. */
    }
    
    

    I like this code a bit better because it’s theme agnostic (will run on any theme/website–WordPress or non-WordPress).

    See the live demo complete with code and instructions https://marklchaves.com/jump-for-it/

    Enjoy!

    lpblue
    Participant
    Post count: 3

    I tried this suggested fix from pzangardi above in 2018 but have a feeling I didn’t do it right. Tried it again just now and it works perfectly! Thank you!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.