We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Online : 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.




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. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us