The result is almost satisfactory. But one more thing.

How can I apply a padding to the sticky header logo as well? I have tried it with various css but could not get it to work.

The normal logo has a padding: 3px; in order to have a little bit of space between logo and top/bottom border of header.
To make a smooth transition to the sticky header logo I need to apply a padding: 3px; to that logo as well.

Ok, I just found out that the quick css for language 1 is not the same as for language 2.
When I do some css changes or add new code then I have to do it for all languages separately?

Hi,

I have placed the css in quick css but it has no effect.
Logo on sticky header is still the the same as on normal header.

Hi,

the css with 80vh works good.

Thank you for helping out.

Hi,

thank you for helping out.

It almost works. However, the border to the right of the last link “Kontakt” stays visible. This should not be visible.
I have recognized an error in your suggested css. It is missing the semicolon in the end. However, even after correcting the error the border is still visible.

Do you have any other idea?

you can close the topic. thx

1.
Well, I give you just one example.

Please have a look at the home page. You can see the feather icon. I want the bottom of the feather to be centered above the heading. Therefore I applied the following css to it:

 position: relative;
  left: 34px;

I used the following css selector which I came up with via crome developer tools ( right click > select selector):
#av_section_1 > div > main > div > div > div.flex_column.av_one_third.av-animated-generic.pop-up.flex_column_div.av-zero-column-padding.avia-link-column.avia-link-column-hover.first.avia-builder-el-3.el_after_av_image.el_before_av_one_third.avia_start_animation.avia_start_delayed_animation > span > span

The css was applied and the result was fine.

Then later I changed something above this element. I think it was adding an avia divider. After that change the css was not applied anymore (and others also not).

Now, the new css slector which chrome developer tool is copying is the following:
#av_section_1 > div > main > div > div > div.flex_column.av_one_third.av-animated-generic.pop-up.flex_column_div.av-zero-column-padding.avia-link-column.avia-link-column-hover.first.avia-builder-el-3.el_after_av_hr.el_before_av_one_third.avia_start_animation.avia_start_delayed_animation > span > span

As you can see, there is a slight difference in the selector and I guess that is why the css code does not work anymore.

Now, these selectors look strange in the first place and on top of that they might change when you change an element of the page.
Also, when I copy the css selector with firefox browser, this is what comes up:
div.flex_column:nth-child(3) > span:nth-child(2) > span:nth-child(1)
It works too, but also looks strange and probably not robust.

My question is: How do I come up with robust css selectors? Whats the best practice with enfold?

Ok,

thank you for the support.

Hi,

ok, I have set the role to admin for you to investigate…

I also have other questions.

How can I ensure that the logo on mobile is always centered? I came up with a dirty way applying this css:
@media only screen and (max-width:767px) {
#header_main > div.container.av-logo-container > div > span > a > img {
position: relative;
right: -135px;

However, depending on the device being used it´s not always in the center. What is a better way to do it?

Also, how can I ensure the socket is always the the bottom of the page?
To make that happen I applied a padding-bottom to the last element of the page and gave the socket a bigger min-height. However, depending on the screen size this does not always ensure that the #socket is always at the bottom. If padding or min height is too big it looks bad on some screen sizes because the space is just too big.
What is a smart way to achieve that?

Thank you for the support.

Hi Ismael,

Your suggestion don´t do the job. I have set masonry column settings to 3. and I have put the element into a 3/5 column with 1/5 left and right. The 3 columns are aligned to the left tough. Also the masnory elemnt gets smaller which I don´t want.

Probably, the whole color section is aligned left. However, I could not come up with css code to align content center. It should not be a difficult task.