How to affix the top main menu

maz001

How can I affix the top main menu when the page is scrolled, just like the JA Fit template.

teitbite

maz001 Hi. It may not be that simple, but please try with this code:

.t3-header {
    position: fixed;
    z-index: 1000;
    width: 100%;
}

and if You will not like it, try this as well:

.t3-header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
}

toonetcreation

Hello,

I'm also interested about this feature.
I have tried your code and works fine to affix the main menu when scrolling down but :

how to get a transparent background when scroll is on top ?
how to get a color background when scroll is down?

Same behavior as ja-donate template.

Thank you
L.

aman204

toonetcreation how to get a transparent background when scroll is on top ?
how to get a color background when scroll is down?

1) Try make the similar changes as suggested here although code line number and file path will vary - will be \templates\ja_sensei\tpls\blocks\header.php file

2) Then, Add this to custom.css file and change background color accordingly :

header#t3-header.affix{
		z-index: 9999 !important;position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    background: #000;
}

Kindly ensure to clear your browser cache if changes dont reflect.

toonetcreation

aman204 ok thank you I will try it ;-)