Changes at gk-short-menu alignment

Good evening,

In the file override.css I have added the following code in order the full screen image to be displayed with bottom alignment ... and depending on the height of the screen the image height will be adapted properly from the upside.
.frontpage #gkHeader {
background: url("../images/header_bg.jpg") no-repeat fixed center BOTTOM rgba(0, 0, 0, 0);
}
What I want is the following:
From the whole code of the module of header position in the front page, I want to keep ONLY the code of gk-short-menu, that is:
<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#menu"><i class="gk-icon-dinner-set-solid"></i> <span>Menu</span></a></li>
.............
<li data-scroll-reveal="enter bottom over .5s after 1.25s"><a href="#location"><i class="gk-icon-map-path-solid"></i> <span>Location</span></a></li>
</ul>

but the gk-short-menu should be displayed with absolute bottom alignment (e.g. 20px) independently on the screen height where the front page is being displayed and independently on the device where is being displayed (e.g. tablet, mobile etc)
Could you suggest to me what I should in order to achieve this or can you send me the changes that I should do?
Thank you

Could you please create a sample mockups so I can see what you request?
Could you please post an url to your site?

my site url is http://www.xxxxxx.gr/z1 (url replaced due to user request)

The image fullscreen is being aligned at the bottom by the following code:

.frontpage #gkHeader {
background: url("../images/header_bg.jpg") no-repeat fixed center BOTTOM rgba(0, 0, 0, 0);
}

I want the gk-short-menu to be aligned at the bottom exactly (absolutly) in 20px always independently on the screen height (see the template image)

I'm afraid that without custom javascript it is not possibly. You would need to count screen size, and then position the element basing ot screen width calculation. With simple css - it is not possible .