Sticky Header

It is possible.

See here: EXAMPLE

I do not remember how we did it, but hopefully this helps.

Thanks for the answer. Although that is exactly what I am trying to achieve, it does not help much.
Does anyone know a piece of code or another solution?

It’s on the Wishlist for future release. (I know that doesn’t help you now).

For a ‘dirty’ solution, I’d suggest switching OFF the sticky header in Customise>Header>Design and layout and then styling the main header to what you want.

Start with:

.sticky-disabled .tc-header {
    position: fixed;
}

which will fix the header to the top. Then remove/change elements as required.

Step 1: Disable social links in header. We used to have them, but since learned it is not best.

—> How: ” Customize ” settings

Step 2: Remove ” Cart ” from menu. You already have a cart symbol which lights up with items this will free space for next step.

—> How: Menu settings

Step 3: Move menu items left + up even with cart symbol.

—> How: Move menu items left in ” Customize ” settings, I do not know how to move them up.

Step 4: Reduce header height.

—> How: Paste code below (Custom CSS)… increase pixels to make larger

header.tc-header {
height: 100px;
min-height: 100px;
}

Also, you probably need to paste this code as rdellconsulting pointed out:

.sticky-disabled .tc-header {
    position: fixed;
}

I like social buttons in the header. Actually that’s one of the reasons I wanted to make it sticky and small all the time.

I will try out your suggestions.
Thanks guys.

I would like to add my vote for this feature to be added sooner rather than later.

The following code does not appear to fix the header to the top. The header scrolls off the page as before.

.sticky-disabled .tc-header {
position: fixed;
}

I’m developing offline.

Social links in footer and sidebar perform better than header. Might seem counter-intuitive, but the numbers don’t lie.