How could i sync the top position

Astrid Pro
#1

if i would use " Same page scrolling" option…that means if i do it like in the ur video the fuction works, everytime i push a button the screen scroll down but the top of the section and the buttom of the menu is not at the same position! Could i fix this because it looks not cool like i your video.

best regards Jochen

#2

Hi Jochen,

I am sorry to hear that you’ve run into an issue. I am happy to help out.

Seems likely I got CSS code solution for that. But, I need to inspect directly first to ensure the code is correct for your specific case. Can you share a link to your page needing help here?

Regards,
Kharis
aThemes Support

#3

Hi Kharis,
thanx for fast reply…the url is www.loeffelschmiede.com…best regards Jochen

#4

Hi,

Thank you for sharing the link.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      #leistungen,
      #produkte,
      #ueberuns,
      #kontakt {
        scroll-margin-top: 200px important;
      }  
    }

Regards,
Kharis
aThemes Support

#5

Hi,
thanks…but nothing changed if i put this in the css box…maybe that i made a mistake? i play with the 200 px digit but also same…kind regards Jochen

#6

Hi,

Thank you for updating me.

Try replacing the code to:

    @media only screen and (min-width: 1025px) {
    	 #leistungen, #produkte, #ueberuns, #kontakt {
    		 position: relative;
         padding-top: 100px !important;
         margin-top: -100px !important;
    	}
    }

Regards,
Kharis
aThemes Support

#7

Hi Kharis,
now it works for the third menupoint…“products”…not for the others…but one step near to goal!

And we have a green box now…

Best regards J

#8

Hi J,

Sorry for the green box. You should remove this line as it was for debugging purpose from my end.

   border: 12px solid green;

Regards,
Kharis
aThemes Support

#9

I checked your one page scrolling menus and they are now correctly linking to proper section of each. Am I correct?

Regards,
Kharis
aThemes Support

#10

Hi Kharis,
i remove the green box…and yes the menues fit to the correct section…but they do this well from the beginning…but it won´t stop not in the right position…best regards Jochen

#11

i try to play with the digits…but i won´t work well…also the headlines in the sections are now to near on the section-top…hmmmm

#12

Hi,

Try this code:

    @media only screen and (min-width: 1025px) {
       #leistungen, #produkte, #ueberuns, #kontakt {
         margin-top: -100px !important;
         padding-top: 150px !important;
         position: relative;
         z-index: -1;
      }
    }

Regards,
Kharis
aThemes Support

#13

Hi,
i´ve tried it but now the size of the sections are different they should be. Specially for the product area…but for three areas it works better (Leistungen, Produkte, Galerie). “Über uns” scrolls to high and for “kontakt” it´s always to low…you could se it on the page at the Moment…sorry…

best regards Jochen

#14

Hi,

Thank you for getting back.

Try removing the custom CSS code I suggested to you for this. And try these 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
    //Anchor scroll
    jQuery(function($) {
    	$('.main-navigation a[href^="#"], .button[href^="#"]').on('click',function (e) {
    	    e.preventDefault();
    	    var target = this.hash;
    	    var $target = $(target);
    	    $('html, body').stop().animate({
    	        'scrollTop': $target.offset().top - 160
    	    }, 900);
    	});
    });
  1. Update

Regards,
Kharis
aThemes Support

#15

Hi Kharis,

it works!!! Looks very fine now!!! Wow…many thanks for helping me here!

Best regards

Jochen

#16

You’re welcome Jochen!

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
aThemes Support