Support Forums

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

Your Time: Our Time:

How to lock contact line on scroll

Featured Lock Resolved Issue
I need to leave locked contact line on scroll like menu for all devices
I enclose photo
Regards

Attachments (1)

  • contact.png
    contact.png 51.4 KB

15 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please use this css into your custom css to solve this

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

Here is the custom css field https://prnt.sc/ijudw8

-Best Regards

gianlu

More than a month ago #Permalink
Ok Thanks. LAst thing to do is to make background fixed like menu on scroll to avoid overlapping words o scrolling
. Is perfect baclground color of menu even for contacts line.
Thanks

Attachments (1)

  • menu.png
    menu.png 126.7 KB

Sifat - Staff

More than a month ago #Permalink
Would you please share specifically what you are trying to change now?

gianlu

More than a month ago #Permalink
Look this video to understand problem. https://screencast-o-matic.com/watch/cqeqjM05pS
You can see contact line overlapped by page words. for this i need background fixed like menu

Sifat - Staff

More than a month ago #Permalink
Please use this css to change the background color of the top bar

#sp-top-bar {
background: red !important;
}

gianlu

More than a month ago #Permalink
Now is ok...last thing to solve…
1. On mobile it cut telephone number . Is better old even telephone number line and show it hold upon menu
2. Which is the name of menu background color?so i put it even for contact line.Now i put black for now

Watch the screencast
https://screencast-o-matic.com/watch/cqeqXP05su

Sifat - Staff

More than a month ago #Permalink
1) Please use this css to fix that.

@media only screen and (max-width: 425px) {
#sp-header, #sp-header.header-sticky {
top: 71px !important;
}
}


2) Here is the header background color rgba(28,49,74,0.95)

-Thanks

gianlu

More than a month ago #Permalink
perfect...thanks

Sifat - Staff

More than a month ago #Permalink
You are always welcome.

gianlu

More than a month ago #Permalink
Still remain problem showing website from desktop and tablet. Part of logo has been cut by contact line
Please see sceencast
https://screencast-o-matic.com/watch/cqfeXYZeHS

Sifat - Staff

More than a month ago #Permalink
Still remain problem showing website from desktop and tablet. Part of logo has been cut by contact line
Please see sceencast
https://screencast-o-matic.com/watch/cqfeXYZeHS

Please check now. I've used this css and the logo is solved now.

@media only screen and (max-width: 767px) {
.body-innerwrapper #sp-header, #sp-header.header-sticky {
top: 80px !important;
}
}


-Thanks

gianlu

More than a month ago #Permalink
working on template without touch css scroll line started to work not correctly.
Please check it. It give problem only on mobile
https://screencast-o-matic.com/watch/cqfi0wZ6hU

gianlu

More than a month ago #Permalink
Problem has been solved. Was style corrupted

Sifat - Staff

More than a month ago #Permalink
Problem has been solved. Was style corrupted

Thanks for your confirmation.


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

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 103
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 93
Toufiq

Toufiq

Total Accepted Answers: 91
Sohan

Sohan

Total Accepted Answers: 3
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 2

115

Templates

295627

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