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

Your Time: Our Time:

Sticky Top Bar - Helix 3

Featured Lock Resolved Task
Hi, I have searched the forum, can't find an answer for this.

Need to have the top bar as sticky so that it stays above the sticky logo / menu when scrolling, using Helix3 template

Thank you.

17 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Gerald but sticky header is only for "HEADER" with Logo and Menu.
You can try this as well:



#sp-header {top: 40px;}
#sp-top-bar {
height: 40px;
position: fixed;
top: 0;
width: 100%;
z-index: 911;
}

Arun Sasi

More than a month ago #Permalink
Hi,

In the template style, Basic settings > HEADER choose Sticky Header to Yes.

Thanks
Arun

FUTURECLIENT

More than a month ago #Permalink
Hi,

Thanks, I am aware of that. It's the bar above the logo and menu, the Top Bar that needs to be sticky too.

Cheers, Joe

FUTURECLIENT

More than a month ago #Permalink
Hi, Is there anyone who can help me with this please?

Thank you.

FUTURECLIENT

More than a month ago #Permalink
Arun Sasi wrote:

Hi,

In the template style, Basic settings > HEADER choose Sticky Header to Yes.

Thanks
Arun



Hi,

Thanks, I am aware of that. It's the bar above the logo and menu, the Top Bar that needs to be sticky too.

Cheers, Joe

Arun Sasi

More than a month ago #Permalink
Hi,

You mean the section above the logo area (http://demo.joomshaper.com/2015/helix3/)

Thanks
Arun

FUTURECLIENT

More than a month ago #Permalink
Arun Sasi wrote:

Hi,

You mean the section above the logo area (http://demo.joomshaper.com/2015/helix3/)

Thanks
Arun




Hi, yes that is the area I mean.

Arun Sasi

More than a month ago #Permalink
Hi,

If you want to change the sticky Header to top bar, follow below steps

Open main.js located in templates\shaper_helix3\js

Line 91 // if sticky header

change the class name of


var stickyNavTop = $('#sp-header').offset().top;
var headerFixId = $('#sp-header');




to


var stickyNavTop = $('#sp-top-bar').offset().top;
var headerFixId = $('#sp-top-bar');



After that we need to update the less/css



#sp-top-bar.menu-fixed {
position: fixed;
z-index: 9999;
}


#sp-top-bar {
left: 0;
position: relative;
top: 0;
width: 100%;
z-index: 99;




Thanks
Arun

Gerald Gründel

More than a month ago #Permalink
Hi Arun,
I'm working with shaper_helix 3. Sticky header doesn't work. I could't find the lines above. Any idea.
Thanks
Gerald

Bendict

More than a month ago #Permalink
@ Gerald Gründel

Did you find a solution. Then I'll like to know :-)

Arun Sasi

More than a month ago #Permalink
Hi,

Please share your URL.

Thanks
Arun

Paul Frankowski - Staff

More than a month ago #Permalink
I saw that your header is sticky now.
Only remove [=] menu from desktop view, yes from template settting.

Gerald Gründel

More than a month ago #Permalink
Okay, thank you! :D

pgypps

More than a month ago #Permalink
does this keep the header and top bar sticky?? or just the top bar?

Paul Frankowski - Staff

More than a month ago #Permalink
Use Arun code, it helped for Gerald case.
---
Tuning/Customization is on your side.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 133
Toufiq

Toufiq

Total Accepted Answers: 105
Sifat

Sifat

Total Accepted Answers: 59
DS

Dustin Swayne

Total Accepted Answers: 1
S

ssnobben

Total Accepted Answers: 1

116

Templates

300084

Community Users

Newsletter

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