bookmark is covered by main header

  • Resolved nicovon

    (@nicovon)


    4 months, 3 weeks ago

    I know this is completely normal. If I set an id on an item and then create a bookmark, when the user clicks on the bookmark link, the item is positioned at the top of the page view. However, at the top of the view is the main header, so the element is located below, the user must scroll the page a little further up to see the beginning of the bookmark.

    How can this inconvenience be avoided? I don’t think the solution is to set the bookmark a little higher, I wouldn’t like this kind of fix.
    I hope I have explained my request well and thank you in advance.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi,

    I’m not 100% sure I understood right, but you can try following the solutions provided here

    #anchor {
      scroll-margin-top: 100px;
    }

    https://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to

    Hope this helps.

    Kind regards,

    Rodica

    Thread Starter nicovon

    (@nicovon)

    Thanks @rodicaelena It seems like a good and easy solution, but.. for the mobile version? With the Neve theme, is it possible to have different px values ??for desktop and mobile?

    Hi,

    You can try to adapt that code on mobile, using media queries, something like. Please make sure to adapt your values, this is just a raw example.

    //mobile
    @media only screen and (max-width: 768px) {
    #anchor {
      scroll-margin-top: 200px;
    }
    }
    //desktop
    @media only screen and (min-width: 768px) {
    #anchor {
      scroll-margin-top: 100px;
    }
    }

    Kind regards,

    Rodica

    Thread Starter nicovon

    (@nicovon)

    I tried it now. It doesn’t seem to have any effect, but maybe I did something wrong, where exactly should I place the code you suggested? I suppose here: https://www.gruppoheos.it/wp-admin/themes.php?page=simple-custom-css.php

    • This reply was modified 4 months, 3 weeks ago by nicovon.
    Thread Starter nicovon

    (@nicovon)

    now it seems to have made some changes but it’s not what I expected, in fact even if I increase the px value, I can never get the page to scroll as far as I want.

    Hi,

    The code can be added in Appearance > Customize > Additional CSS.

    If it’s not working, you can also try adding !important for each CSS rule, and try to adjust the code.

    Kind regards!

    Thread Starter nicovon

    (@nicovon)

    Thanks again for your help and sorry for the late reply. Unfortunately this approach with the additional css does not seem to give the expected result, even by putting !important

    Theme Author Themeisle

    (@themeisle)

    Hi,

    I’m sorry to hear that’s not working for you. In this case, you’d probably need some custom work there, for which I’m not able to help.
    Kind regards!

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