Support Forums

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

Your Time: Our Time:

sticky header menu doesnt'work

Featured Lock Resolved Task
hi,
I have problem with sticky header

it works desktop side but not on mobile version. here my website : http://www.giffonifilmfestival.it

can you help me please? thank you

Attachments (1)

  • Image-1 (1).jpg
    Image-1 (1).jpg 68.9 KB

17 Answers

Paul Frankowski - Staff

2 weeks ago #Permalink
Ciao,
sorry, but it was You who broke it with code in custom.css line 421.
To fix it, please use below custom CSS after your code:

@media (max-width: 640px) {
#sp-header.has-slideshow {top: 0px !important;}
}



you have to be more careful next time. Support Policy Rules.

Simona

2 weeks ago #Permalink
Sorry,
I try to explain better my problem. I added sp-top-bar but now header is not sticky on mobile version and I don't understand why. can you help me please? I think something wrong in main.js cause on my desktop version it works well

Simona

2 weeks ago #Permalink
to be clearer , you can see your demo

http://demo.joomshaper.com/2015/helix3/

in this template in mobile version header is sticky and goes at top

Paul Frankowski - Staff

2 weeks ago #Permalink
On mobile emulator on the browser, header seems to be sticky.
Beside CSS is correct.

Can you make a screenshot from smartphone to show me what is wrong?

Simona

2 weeks ago #Permalink
if I set top:0px as you suggest , my top bar is hided always, cause my header goes to the top. I would like that my header goes to the top only when it scrolls, not at first.

if you see your helix template demo , you will notice bar top at first and then when scroll down, header goes to the top. In my website when you scroll down , my header is offset not goes to the top.

but If I correct my custom.css I never see my top bar

Attachments (1)

  • screen_tep.jpg
    screen_tep.jpg 129.2 KB

Simona

2 weeks ago #Permalink
any news please? thank you

Pavel

2 weeks ago #Permalink
any news please? thank you



#sp-header.menu-fixed {
top: 0 !important;
}

Simona

2 weeks ago #Permalink
i tried but nothing; .has_slideshow class doesn't disappear when scroll down so if set t"op to 0px !important" top-bar disappear.

I need to remove .has_slideshow class when my mobile menu scroll down

thank you

Pavel

2 weeks ago #Permalink
i tried but nothing; .has_slideshow class doesn't disappear when scroll down so if set t"op to 0px !important" top-bar disappear.

I need to remove .has_slideshow class when my mobile menu scroll down

thank you

It would be better if you explain what you want to achieve? Do you want the top-bar and header to remain in place when scrolling, or do you want the top-bar to disappear and the header to stick to the top?

Simona

2 weeks ago #Permalink
hi, sorry for my English. I m italian :p

I would like the top-bar to disappear and the header to stick to the top ONLY when scroll down. On desktop version is ok ; on mobile version it doesn't work.

If you see your demo of helix template, it exactly what I want. thank you so much

Pavel

2 weeks ago #Permalink

#sp-header.menu-fixed {
top: 0px !important;
}
#sp-header.menu-fixed-out, #sp-header.menu-fixed {
-webkit-transition: none;
transition: none;
}

Simona

2 weeks ago #Permalink
Hi,
it doesn't work. the top bar disappeared

the sticky move is ok . but BEFORE scrolling down doesnt'appear my top bar like your demo helix

thanks

PS: see your demo http://demo.joomshaper.com/?template=helix3 in mobile version . the result is not the same: in my website I can't see my top bar. I would like to see it; THEN when the user scroll down, header sticky goes up and it s ok, but when user is at home, he should see top bar before scrolling. I hope to be clear now

thank you thank you

Simona

2 weeks ago #Permalink
hi, any news please? the problem is not solved, please.

I would like the same effect of your helix template.

when the user goes at home in mobile version see at top social networks, infos ecc... then when user scroll down menu goes at top .
I want the menu bar at top ONLY when user scroll: To understand my needs please see your demo template helix on mobile.

thank you thank you

Pavel

One week ago #Permalink
I see that your site has some kind of problem with js. If you go to a direct link, then everything works as you want. But if you click on the Home menu item, the switching of the header classes (for which javascript is responsible) stops working and the header always gets the menu-fixed class instead of menu-fixed-out. But in fact, the header should receive the menu-fixed class only after scrolling down. (note for joomshaper team)

Try using the template offcanvas menu instead of the add-on navigation. I don’t trust the navigation addon personally, some problems constantly arise with it and I just never use it.

Wait for a response from the support team. I am not a member of the support team.

Simona

One week ago #Permalink
hi I m waiting for support too. Yes I think that is a problem of js in file main.js. The problem is focused only on mobile fortunely. hoping that joomshaper team can answer me soon cause I m so in late

thanks pavel for your help.

Paul Frankowski - Staff

One week ago #Permalink
I will try to ask our developers for advice, hopefully, they back from holidays.

Paul Frankowski - Staff

One week ago #Permalink
Please try this


@media (max-width: 440px){
#sp-header.has-slideshow {
top: 0px !important;}
}


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 117
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 91
Toufiq

Toufiq

Total Accepted Answers: 32
Al Mamun

Al Mamun

Total Accepted Answers: 3
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

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