Making The Top Bar Sticky Also - Question | JoomShaper
Back to the questions

Making The Top Bar Sticky Also

PD

Peter Dowse

Template 1 year ago

Hi Guys,

We have this site in development https://abolishpest.com.au/joomla5/

I would like to make the top bar area (where the logo and phone number is) also sticky - at the moment it's only the menu structure that is sticky.

How would I go about doing this?

0
5 Answers
Order by
Oldest Newest Votes
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 1 year ago #172014

Hello,

Thank you for your reply. We have set the header to be sticky when enabled from the template options. On your site, the header is already sticky, and I have also made the top bar sticky along with the header. If you do not want to keep header sticky offset, then please go to your admin dashboard and follow this:

system -> Site Template Styles -> Template Options -> Basic -> Header -> Sticky Offset -> put here 0

then click save.

Is there anything that I can help you?

Thanks!

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 1 year ago #171926

Hi there,

Thanks for reaching out to us.

please try this css into your custom css to achieve it:

#sp-header{
    margin-top: 78px;
}
#sp-header.header-sticky {
 {
    margin-top: 0;
    position: fixed;
    top:78px !important;
}
#sp-top-bar {
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 0;
}

For add custom css you can follow this guide: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Hope this helps!

Best Regards

0
PD
Peter Dowse
Accepted Answer
1 year ago #172004

Hi Ziaul,

Many thanks for this solution.

That worekd a treat.

One additional question - what's the best method for making the #sp-header also stay fixed as it's moving behind the top bar on scroll.

If possible, I would like both the top bar and the header areas to be fixed.

0
PD
Peter Dowse
Accepted Answer
1 year ago #172015

That worked, however, I did need to add position:fixed; to #sp-header as there was no sticky offset in this template.

Thanks for your assistance - got it working well now.

Greatly appreciated.

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 1 year ago #172016

You are welcome.

0