Link to section?

Found a few old posts on this topic. Such as this: https://docs.athemes.com/article/215-how-to-link-header-button-to-section-sydney

Can’t find what they mention though. “While you edit your page that you’ve built with the Page Builder plugin, hover over the wrench icon on the row you want…”

Is this still how you do it? What am I missing? I want to link to diffrent pages on my front page. The demo links work fine but i can’t find where they are set or make my own…

Cheers

Tried this one too without success: https://www.youtube.com/watch?v=hpow_hlrdmc

Hello there,

To help inspect and find what goes wrong on your page, please share a link to that page here. Ensure your link and section settings remain there.

Regards,
Kharis

Here is the site: http://meifalt.meibe.se/

The “Kontakt” Menu item is now using an anchor widget. But the menu cuts the heading. And the demo-content does not seem to be using Elementors anchor widgets.

Cheers
Martin

You can add extra top padding as height as the floating header bar. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      #kontakt {
        padding-top: 80px;
        margin-top: -80px;
      } 
    }

margin-top: -80px; used to avoid longer gap with previous element.

Regards,
Kharis

Nice! That works! Two questions. Is there a way to make it “global”? So i don’t have to make one for each and every anchor widget.

Second question, the first time i click “Kontakt” in menu it scrolls down to a certain point. Second time it scrolls down a tiny bit more. And if I scroll around and click it again it always stays on that second spot. Untill i reload the page and then the first times gives a diffrent result than the second one.

thank you so much for your help!

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      'use strict'

      if( $('.mainnav a').length ) {
        $('.mainnav a[href*="#"]').each(function() {
          var IDs = $(this).attr('href');
          $(IDs).css({
            'padding-top': '80px',
            'margin-top': '-80px';
          });
        });
      }

    })(jQuery);
  1. Update

Does it happen on all browsers or specific ones? Which one did you use?

Regards,
Kharis

Thank you for the Java script! It works like a charm. Just need to set the exact pixels i need. The “jumping” thing is still an issue. I’ve tried chrome and firefox.

That issue does not happen on the demo-links. Only the ones i make with anchor widgets in elementor. Maby i should just figure out how to set the links like they do in the demo content. Like #services and #team

Do you know where i can find those values?

Once again thank you for your time and effort!

cheers
martin

The unique ID name is defined in the section’s Advanced options in the CSS ID field.

Regards,
Kharis

That setting is exactly what I was looking for! Thank you!!!

Still jumps on second “kontakt” click and not on the demo-links like team. It’s strange but I can live with that. =)

Thanks again!

Great!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis