Really thankful for the help and support provided!
It works, but needs some adjustments.

It looks good in mobile, and tablet landscape.
However, in tablet portrait and desktop the images are off center.
I would say its most important they are perfectly centered in desktop.

I provided a screenshot in private content.

Thanks for the reply!

Can you give me a complete breakdown on how to structure it?

Should I remove all the code I mentioned and replace it with

.socket.class {
    display: flex;
    justify-content: center;
}

in quick css?

Sorry for bumping.
To view the site, please use the credentials in the private content below

I have a new question (forget about the last question above, we are not gonna use the sticky header at all)

I need to correct the margin to the left of the logo. The margin to the left is wider than the margin to the right of the logo. Its not our image as I have tried to delete the logo and use enfolds default logo, the problem remains.

I need to decrease the margin to left of the logo so the margins left/right are even, what css code should I use?

Provided screenshot in private content

• This reply was modified 6 years, 7 months ago by belinger.

It works great! :)
So my final question, the logo was not perfectly centered. I managed to fix this my changing transform: translateX(-50%); to transform: translateX(-60%); in:

#header .logo {
    left: 50%;
    transform: translateX(-60%);
    z-index: 999;
}

When the header scrolls down to sticky header size, it seems there is a new rule for centering the logo (the logo is not perfectly centered as in the normal header size).
How can I better position the logo in sticky header size? I would also like to narrow the margins to the left and right of the logo in sticky header size

The old fix Jordan mentione above does now work with this new approach:

.header-scrolled.header-scrolled-full #menu-item-2384{
margin-right:30px!important;
}
.header-scrolled.header-scrolled-full #menu-item-2398{
margin-left:30px!important;
}

• This reply was modified 6 years, 8 months ago by belinger.

After testing these quick css I have noticed a couple of things that needs to be fixed:

1. In normal header size, only ~50% of the top of the logo is clickable
2. In sticky header the logo is not clickable at all
3. As you start scrolling the page, just as the header are about to go down to sticky header size, the logo gets stuck and remains only 50% visible, then jumps down. There is no smooth transition.
4. The full width slider right below the header area is clipping inside the header area by ~5-10 px (a bit hard to notice at first since the slider/header is transparent)
5. In mobile, the logo is only visible by ~25% and the burger menu just barely, making in unusable.

It worked thanks! But when I scroll the page, the logo disappears

Yes, setting a custom pixel value in Enfold->Header->Header Size, makes the header smaller, but at the same time also makes the logo smaller.
Trying some different custom pixel values I find that ~80 px would be a good size, if the logo could remain the same size as if Enfold->Header->Header Size is set to the default value, “Large”.

Is it possible to turn off tablet-mode completely? Either have tablet switching to Mobile or Desktop view.

I have provided screenshots below and URL to our website.
The problem is mostly visible on IMG_0003.PNG
On my Android tablet the left section of the page has a small image for every section/transition
However, on iPad, instead of 4 small images it has 1 big image. On desktop this big image changes for every section as you scroll down the page.
On iPad this image is stuck and only shows up at section 3 of the page as you scroll down. The image is displayed as it would be stuck in the middle of a transition.
We have tried your demo http://kriesi.at/themes/enfold-app/
And the problem is exactly the same, so its nothing wrong with our setup.

Looks better, but could need some improvements.
The search box is now bigger but still not the same height as the Fullwidth Buttons to the left and right.
Also, this CSS affects the normal search box in header/menu. Its now bigger than default.

Provided some links below

Thanks for trying to help!

However, the color background of the magnifying glass now expands around the search box. I need it to look like a normal search box. Just bigger in height. So it has the same height as the buttons to the left and right of the search box in the widget.

Also, the CSS changes the default search box in the header/menu. I need that search box to stay intact and not affected by these CSS-changes

Thanks for your reply. I have tried to figure out what to replace body > a with. I cant get it working. I provided link and further details in private area:

Provided login details

I added the code at the very bottom in functions.php. After that, header images are no longer visible, just white empty space. I have tried to re-upload images and can see the small thumbnail in product-category settings. But they no longer appear as product-category/header images.

EDIT: Images not appearing happened after I updated Enfold to 3.5. I tried the code above with 3.4.1 of Enfold, and the images were visible but they were still in parallax, the code did nothing. Now, in 3.5 it just removes the header images.