SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

How to get sticky header to remain visible

4 years 4 months ago #109122 by MG
Hi, I have successfully installed an add-on on yootheme joomla template nano3 to incorporate the sticky uikit component. However when I scroll down the page, even though the header is sticky the remaining page when scrolled overlays the header thus rendering the sticky header useless. What css if any could I incorporate to get the sticky header to remain on top when scrolling.
Any help gratefully appreciated.

Many thanks

Please Log in to join the conversation.

4 years 4 months ago #109134 by Nick
Hi and welcome, MG!

Are you familiar with Firebug? It's an excellent tool to help you troubleshoot CSS and HTML issues. Our "Using Firebug to Edit Joomla Templates" tutorials will help you get started with Firebug:
1) www.ostraining.com/courses/session/jooml...introducing-firebug/
2) www.ostraining.com/courses/session/jooml...diting-with-firebug/
3) www.ostraining.com/blog/coding/bootstrap-firebug/
4) www.ostraining.com/blog/joomla/using-fir...it-joomla-templates/

Could you give the tutorials a try and see if you can troubleshoot your issue with Firebug?

Also, could you post the URL to your site so we can see the issue?

Looking forward to helping.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 4 months ago #109809 by MG
Hi Nick, Thanks for getting back to me.
I have tried firebug without any luck.
the url is staging2.dcupharmacy.com.
I have tried inserted backround:#fffff; into the uk-sticky div but there seems to be something in the theme.css that is overriding the problem because if I delete the theme.css in custom style of joomla template it seems to work o.k

Any help or guidance would be appreciated.

Many thanks

Michael

Please Log in to join the conversation.

4 years 4 months ago #109833 by Valentin
Replied by Valentin on topic How to get sticky header to remain visible
Hi Michael,

In your code there is a typo: backround, must be background.
If after adding that correction still doesn't work, please try adding !important.
background:#fffff !important;

Do something change?

Looking forward to help you

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 4 months ago #110037 by MG
Hi Valentin,
Thanks for your reply. Could you please tell me what file you have found the typo in backround please. I cannot seem to find it anywhere.

Thanks

Michael

Please Log in to join the conversation.

4 years 4 months ago - 4 years 4 months ago #110048 by Nick
Hi Michael,

I think he just meant in your reply at www.ostraining.com/support-forum/coding-...main-visible/#109809 :

I have tried inserted backround:#fffff; into the uk-sticky div but there seems to be something in the theme.css that is overriding the problem


Make sure that when you add it to your custom.css that it's:
background:#fffff !important

The !important will tell the browser to use that code, rather than any other it finds.

Hope this helps! Let us know if you have any questions and we'll be glad to answer.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!