Maximenu going over header on scroll down

Hi Cedric
Just wanted to say we are really getting into the use of MaxiMenu CK in our Joomla content and articles.
It is really helping us a lot thank you.
I am having a slight issue though with menus we have created and placed in Joomla articles going over the header when we scroll down.
Is there anything I am missing or doing wrong to stop this please?
I have found my z-index value on my template header is set to 5
I have also set the Maximenu CK Z-index field and set that to less than 5. -1 in some tests but it still keeps going over the header when the menu items go up.

I have attached some screenshots to show what I have tried and what is happening but I can't work this out sorry.

Please feel free to visit www.strengthandconditioning.org/test-page to see it happening on our site.

You can login with: MaximenuCK
Password: ck001

This should land you on the correct page and hopefully recreate my problem

My other question was is there a way to centre the texts on my joomla menu items too?

They are always left aligned at the moment

You can see this in the screenshot maximenu_z_index_02.png

I would like the words OUTLINE, RECORDING, SLIDESHOW etc to be centred if possible

We have created joomla menus of these items and then a MaxiMenu CK module using your component and styled it through there too

We haven't made a joomla module for the joomla menu itself yet as I'm not sure that we needed too

Let me know if you need any more info from me.

Thanks

Hi
to fix the issue with the menu, you can add this custom css to your template for the request "going under header normally", I don't understand because what you are showing is not Maximenu CK. The top menu is not made with Maximenu CK but with bd-menu

and to center the text you can use that
CEd

Thanks so much for the help. I will look to apply these changes.

With regard
"for the request "going under header normally", I don't understand because what you are showing is not Maximenu CK. The top menu is not made with Maximenu CK but with bd-menu"

I just meant to say that that is what I wanted the Maximenu CK menus to do - go under the header like the other things on the page.
I was trying to show the other items normally go under my header but my maximenu was going over - does that make sense? Sorry about my explanation here

I will try the other fixes thank you and come back to yo

Hi Cedric

I have added the lines to my CSS area of my header thank you.

The centre align of the text works perfectly now. See maximenu_z_index_05.png. Thank you

The line added for the menu item buttons to go under the header doesn't quite work yet though sorry.

I added:

section.u-palette-1-base ul.maximenuck {
position: static !important;
}

To the same place as the centre align info you gave me below but they still sit over the header information.

I have attached a new image to show how they look now. maximenu_z_index_06.png

They still seem to run over the top of the header. If I can get them disappearing under the header then that would be perfection.

I have left the page available to view by logging in as originally posted below if that is easier to see

Hope you have a good weekend and thanks again for all the help so far

I have checked and it seems that this code is not loaded check that you have correctly put it in the page and that there is no mistypo. The code shall work
try again and let me know

You are right. It was me. This is the CSS I added along with another piece for another extension I had previously. I added yours to the end of the existing initially but you said it wasn't loading. I went back and looked again and moved yours on top and now it works.

I'm not good with CSS knowledge sorry. From the below does the \ that shows on my originally CSS entry to my header indicate end of CSS kind of thing? Is that why your new code didn't load as I put it after the \

I hope I am making sense as I am bit confused but want to learn

This is working great thank you:

section.u-palette-1-base ul.maximenuck {
position: static !important;
}


section.u-palette-1-base ul.maximenuck li a {
text-align: center;
}

fieldset label{
width:100%!important;
}\

This didn't work:

fieldset label{
width:100%!important;
}\

section.u-palette-1-base ul.maximenuck {
position: static !important;
}


section.u-palette-1-base ul.maximenuck li a {
text-align: center;
}

I'd love to learn please