Hi Paul,

Doing what you want is kind of advanced stuff.
It is an advanced stuff because you need to wrap the Header and the Navigation sections in a container and then add the data-uk-sticky attribute to the container.

Here's what you need to do:

1. You need to copy the default.yaml file from ROOT/templates/it_norman/layouts to ROOT/templates/it_norman/custom/layouts so your changes do not get lost when you update the template. This is the same step as the one explained in the Customizing Theme Files section in the official Gantry 5 documentation.

2. Now you need to edit the default.yaml file and wrap the Header and Navigation sections in a container. You can find all details in the Creating Layout Presets section in the official Gantry 5 documentation.

3. Once you have done the above, you need to load the new/modified Layout in the Base outline and then you need to re-inherit the Default outline so it takes the changes.

4. And finally, you need to add the data-uk-sticky attribute to the newly created container. You should also have in mind that there is a bug in the Gantry 5 framework which appears in this scenario (wrapped sections). I just reported it so you can read more about it in this issue on Github.

Here, have a look at this video that I recorded for you (watch it in Fullscreen and FullHD for better quality). It shows everything that I explained above.

Hi Ivo,

That looks advanced indeed, thanks for the explanation and video! But for now I decided to use your headroom atom (which i tweaked a bit at line 15 in file headroom.html.twig, just to keep it below the menu).
In my case I use top: 105px;

Anyway, I am not sure yet if I am going to 'stick' with this quick fix or give your solution a try.

Regards,
Paul

You are welcome Paul.
Yeah, you can stick to the solution that works best for you

Ivo Valkov wrote:

Hi Paul,

Doing what you want is kind of advanced stuff.
It is an advanced stuff because you need to wrap the Header and the Navigation sections in a container and then add the data-uk-sticky attribute to the container.

Here's what you need to do:

1. You need to copy the default.yaml file from ROOT/templates/it_norman/layouts to ROOT/templates/it_norman/custom/layouts so your changes do not get lost when you update the template. This is the same step as the one explained in the Customizing Theme Files section in the official Gantry 5 documentation.

2. Now you need to edit the default.yaml file and wrap the Header and Navigation sections in a container. You can find all details in the Creating Layout Presets section in the official Gantry 5 documentation.

3. Once you have done the above, you need to load the new/modified Layout in the Base outline and then you need to re-inherit the Default outline so it takes the changes.

4. And finally, you need to add the data-uk-sticky attribute to the newly created container. You should also have in mind that there is a bug in the Gantry 5 framework which appears in this scenario (wrapped sections). I just reported it so you can read more about it in this issue on Github.

Here, have a look at this video that I recorded for you (watch it in Fullscreen and FullHD for better quality). It shows everything that I explained above.

Hello Ivo,

I tried to wrap the Header and Navigation in a container on the "Headline"-Template. This template has a container on the first level in the default.yaml. I tried it like you show it on the video, but it doesn't work, like you see in the screenshots.
Do you have an idea to fix it?

Hi Dirk,

I just tried it and I can confirm that this is a bug/limitation in the Gantry 5 framework.
Would you please open a new discussion on Github so the Gantry 5 developers can have a look at fix it?

Just explain everything in details and let them know that "a second level container does not allow you to access its settings (the cog wheel icon is missing in the Layout Manager)".

Hello Ivo,
this all is about the "norman" Template.
How it is in the template Medical?
If I do a custom modul section in medical than there is no Position "navigation A".

Could you please help me to do the whole header (Logo and navigation) in medial template to be sticky?

DANKE!
Ralf

Hello Ralf,

Everything that I wrote in this discussion is absolutely the same in Medical.
Make sure that you watch the video in my comment above.

Also, please read the short explanation that I wrote in this discussion.

I cannot help you further with this because of the following reasons:

1. Such things are way out of the scope of support.

2. I explained everything in great details in this discussion. There's nothing else I can say or write. Just watch the video, follow the instructions and you will do it.