thumbnail grid categories fixed.

[Toby]

Hi

I've added a fixed header to one of my pages and have the thumbnailgrid scrolling behind it. but I'd like the categories to remain fixed not scroll up and be in front of the fixed header.

The code on said page so far is this -

.lay-thumbnailgrid-filter {
position:fixed;
top:0;
left:12.1%;
margin-top:90px;
margin-right:20px;
z-index:99;
}

body.slug-project_test .lay-hr {
background-color: #d3d3c3;
position:fixed;
z-index:99;
}

body.slug-project_test .navbar{
background-color: #f1f1f1 !important;
height:17.5%;
}

Cheers
Toby

[Toby]

Any help please?

I'd like the thumbnail grid images to go behind the navbar and the categories to remain above the navbar.

As soon as I allocate a z-index higher than 1 to the navbar it hides the thumbnail grid and categories despite giving the thumbnail grid -filter a index of 99

[arminunruh]

i think theres a post about this on the forum here somewhere already no?

read about stacking context
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

[Toby]

@arminunruh

Hi Armin

I Could only find these posts

http://laythemeforum.com:4567/topic/7217/category-filter-position?_=1680510893228

http://laythemeforum.com:4567/topic/6399/category-filter-position/4?_=1680510893231

but they don't help with positioning of the categories text above the navbar.

I don't understand why a fixed .lay-hr at a z-index at 20

can appear above the navbar

but a fixed .lay-thumbnailgrid-filter at a z-index at 99 is still hidden below said navbar!?

Cheers
Toby

[arminunruh]

its because of stacking context

read the link i posted here, why do i post the link if u dont read it :)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

look through the divs, and set divs to position static that are position relative

like:

.row, .row-inner, .column-wrap{
position: static;
}

but still read the article in the link and find out if there are any other things creating a stacking context. and then u need to use custom css so no extra stacking contexts are created

[Toby]

@arminunruh

Thanks Armin - have it working.

btw I did read the link but i'm the daft student who's changes the navbar to static and fails!!

Thanks again
Toby

[arminunruh]

great toby!

what was the css you used in the end to make it work?
so others can see the answer ^^