Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to fix a section at top of page above menu - so it stays in view when page is scrolled

Featured Lock Resolved
I want to make the Top section (which has top1, top2 and top3 module positions) sticky so it does not scroll. Mine is above the logo/menu and I want it to stay visible at all times.

How would I achieve this?

I have set the section to fixed etc. but it still scrolls up.


2 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Please add this css code inside your custom.css file.

#sp-top {
position: fixed;
z-index: 999;
height: 40px;
background: #FAFAFC none repeat scroll 0 0;
width: 100%;
#sp-header {
background: #FAFAFC none repeat scroll 0 0;
height: 90px;
left: 0;
position: relative;
top: 40px;
width: 100%;
z-index: 99;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;

Note: Please note that, We don't provide the customization support.


There are replies in this post but you are not allowed to view the replies from this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 113


Total Accepted Answers: 60


Total Accepted Answers: 48
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 21
Ofi Khan

Ofi Khan

Total Accepted Answers: 16




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us