Anchor position short-menu

I create an anchor to bottom2 poisition id restaurant, but when i click on the icon the page scroll no to the begin of the module. How i can set the correct poisition fo the scrolling?

http://demo.webarch.it/estrella_00/

Thank

G.Fantoni

Hi,
few days ago, I gave tip about it. I will find it.

Add this same link again,
but also use this CSS:

Code: Select all

 .frontpage #gkBottom2 {
    padding-top: 90px;
}

P.s.
Read also this: https://www.gavick.com/forums/steak-hou ... 41563.html

This i s the code of the module, where I put your code? :

Code: Select all

<h1 data-scroll-reveal="enter top over .5s after 0s">Acquista una casa ai Caraibi!</h1>
<h2 data-scroll-reveal="enter bottom over .5s after .15s">…una terra, definita dal suo primo visitatore, Cristoforo Colombo:“la più bella che l’occhio umano abbia mai visto”.</h2>
<p><a href="#restaurant" class="btn" data-scroll-reveal="enter bottom over .5s after .25s">Scopri il nostro complesso residenziale</a></p>
<ul class="gk-short-menu">

<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="index.php/gallery"><i class="icon-progetto-3"></i> <span>Progetto</span></a></li>

<li data-scroll-reveal="enter bottom over .5s after .5s"><a href="#appartamenti"><i class="icon-appartamenti-1"></i> <span>Appartamenti</span></a></li>

<li data-scroll-reveal="enter bottom over .5s after .75s"><a href="index.php/gallery"><i class="icon-photo-1"></i> <span>Gallery</span></a></li>

<li data-scroll-reveal="enter bottom over .5s after 1s"><a href="#musthave"><i class="icon-checklist"></i> <span>I nostri plus</span></a></li>

<li data-scroll-reveal="enter bottom over .5s after 1.25s"><a href="#vivere"><i class="icon-vivere-1"></i> <span>Vivere qui</span></a></li>

<li data-scroll-reveal="enter bottom over .5s after 1.50s"><a href="#location"><i class="icon-location-2"></i> <span>Location</span></a></li>
</ul>

Check my footer link. And you will see link to guide.

I try tu put

Code: Select all

 .frontpage #gkBottom2 {padding-top: 590px;}

in the box coustom css in template settings, but don't work

I understand!

Work!

Thank.

G.Fantoni

590px ??? are you sure

It was an experiment. The correct value was 100 px.

Thank

I did the same thing with gkBottom5:

Code: Select all

.frontpage #gkBottom5 {
    padding-top: 100px;
}

But changing padding-top makes no difference to the scrolling. Strange.
Am I missing something?
dev.ficcionesmedia.com/provencal-2

but 140px could be okey in this case (#gkBottom5).

It is the same.

Code: Select all

.frontpage #gkBottom5 {
    padding-top: 140px;
}

No matter what padding-top, 100, 140, 200, 300 makes no difference to the scroll from short-menu

I insert the code in:

Template > Advanced settings > Custom CSS CODE

But right now you have still 60px.
When I used 130px on your webiste, it looked okey in my opinion.
So maybe you added in wrong place.

Code: Select all

#gkBottom5 {
    padding-top: 130px !important;
}

or if you want to use on HomePage only

Code: Select all

body.frontpage #gkBottom5 {
    padding-top: 130px !important;
}

I think I am not explaining well.
The css

Code: Select all

.frontpage #gkBottom5 {
    padding-top: 130px !important;
}

does change the padding at the top of the gkBottom5, and I can see that.
But the scroll to the anchor (from short menu) does not change. The anchor point is always in the same place. That is what I want to change.

www.ficcionesmedia.com/provencal-2/

Yes, but if you add "#gkBottom5" as a menu item he will scroll to whole area, and it will not be cropped as was before.
As you can see, not all positions are really made to be used in OnePage layout.

Thank!

G

I am sorry, I can not understand.
I created a module ID override for #gkBottom5 - #reservations. If I make #gkBottom5 the target in the short menu in place of #reservations, this will make no difference. How do I make #gkBottom5 a menu item? What menu?

Screenshot 2014-12-07 15.58.44.png

No my examples was based on default names of sections, so yes, your own names.

So I am sorry to keep insisting, but do you have any idea how to fix my problem? Or is it impossible to make the #gkBottom5 ID align to the top of the module?

so you were able to rename ID or not?

If yes, use my code but with your "reservation" name.

Why should I rename my ID? And why would I change the css code that I already have? I am very sorry but I can not understand at all what you are saying.
Since I started on this thread my Module ID has been #reservations (= #gkBottom5) and my css has been

Code: Select all

.frontpage #gkBottom5 {
    padding-top: 130px;
}

Nothing has changed.
In fact I think I may have a javascript issue. I did nothing to the module yesterday, but I did some javascript changes and now the scrolling to the anchor is about 400px above the top of the module! This changed from being 80 px below!
Really, I am only guessing, because I have no idea what is happening.