The sticky menu does not work properly

delinea

I do not understand what I could have done wrong, the sticky menu worked perfectly, and now it is presented in the background of the content with errors.
You can verify it by scrolling on the website.
Please

saguaros

delinea

Hi,

I don't see the custom CSS as I suggested in this discussion: https://member.joomlart.com/forums/d/559-i-want-to-install-this-template-but-i-have-questions/8

.stickymenu.affix {
    position: fixed;
    top: 0px;
    z-index: 999;
    float: none;
    width: 100%;
}

Could you update again?

delinea

I removed one of the meu options and it works ... I'm going to verify where the problem is with that option (because I need it). I warn you again, sorry for the inconvenience.

delinea

In the mobile version does not work the sticky menu?

aman204

delinea In the mobile version does not work the sticky menu?

Have tried to replicate the feature on my local install and it appears that the menu navigation in collapse mode (module position) has been customized to show in  positions due to which inherit css attribute as suggested doesnt apply in responsive mode

Adding the similar wrapping div tags in /templates/ja_focus/tpls/blocks/header.php along with

@media (min-width: 320px) and (max-width: 480px) {
  //CSS
  .ja-topbar{position: fixed;top: 0px;
    z-index: 999;
    float: none;
    width: 100%;display:block !important;} 
}

in custom.css file derives the purpose to some extent however it would make the  positions also sticky in desktop mode so not a concrete solution for now

Saguaros might be there soon to help with better and concrete solution to achieve the same 🙂

Cheers

paulus1031

The mobile uses different divs so the css won't apply and sticky on mobiles can be problematic

I can't see the css correctly with the pagespeed plugin at the moment - please can you disable this
The server plugin or any optimisation extension shouldn't be enabled during development - at the moment the server module is merging css files

Thanks
Paul

aman204

paulus1031 Update: Have tried further workaround and tweaking.

This might derive the purpose sought for :

1) Try add this to custom.css file (As Paul suggested, Kindly disable specific plugin during development phase)

@media (min-width: 320px) and (max-width: 480px) {.ja-topbar .stickymenu{position: fixed !important;top: 0px;
z-index: 999;float: none;width: 100%;display:block !important;background:#fff;} }
.ja-topbar .stickymenu.affix{position: relative;}

2) Upload and replace the specific file (Do ensure to take backup of current file in case if restoration needed)
/templates/ja_focus/tpls/blocks/header.php file

headerphp.zip

2kB

Note: Kindly presume this to be experimental customizations and do test/verify rigorously for the same in varied ways

delinea

I deactivated PageSpeed mode. Thank you, Aman, thank you Paulus. Could you check the CSS now?

aman204

delinea Kindly confirm if you have tried the suggestions provided in preceding post

delinea

I did the test, I think I did it correctly, I added the code to the custom.css and replaced the heather file, but it did not work well, I attached images

saguaros

delinea

Hi,

This custom CSS code should work for topbar on mobile view:

@media (max-width: 480px) {
.ja-topbar {
    position: fixed;
    width: 100%;
    z-index: 999;
    background: #fff;
}
}

If there is still no go, you can share the FTP account, I will check for you.

Regards

delinea

Work perfectly!!! Thank you

paulus1031

Hi There,

I can't see the styling applying as previously and I can see the page speed module enabled on the server

I can see the sticky underneath content - with using the pagespeed module it will merged css files as I mentioned above

I have unlocked this thread

delinea

Work pefectly, really nice

paulus1031

This is what I see

I'm assuming you need to clear your browser cache