fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: How to make Topbar section always display and sticky

How to make Topbar section always display and sticky 1 year 7 months ago #18983

  • DaoHang
  • DaoHang's Avatar
  • Offline
  • New Member
  • Posts: 12
  • Karma: 0
Hello,
Thank you for your hard work on your framework. I just started playing with Astroid framework and I enjoyed it very much.
A quick question about Topbar section. Currently, the topbar section is hidden when I scroll down to the bottom of the page and hidden on the tablet and mobile. I would like to have that section to display all the time and sticky along with the Header section when I scroll down to the bottom of the page.
How can I do that?
Thank you for your help.
D
The administrator has disabled public write access.

How to make Topbar section always display and sticky 1 year 7 months ago #18992

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4445
  • Thank you received: 642
  • Karma: 116
Hi D,

It's all because of classes, remove whatever section classes topbar has right now and add position-sticky to the topbar section.

getbootstrap.com/docs/4.0/utilities/position/

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

How to make Topbar section always display and sticky 1 year 7 months ago #19014

  • DaoHang
  • DaoHang's Avatar
  • Offline
  • New Member
  • Posts: 12
  • Karma: 0
Hi Chetan,
Thanks for your message.
I removed custom class in the Topbar Section and tried class 'position-sticky', but it did not sticky. So, I tried class 'sticky-top', it did sticky, but it covered sticky header that I have on Astroid Header position. I want to have both Topbar Section and Header Section stay sticky when scroll down to the bottom of the page on the large device.
Did I miss something when adding custom class?
Thanks,
D
The administrator has disabled public write access.

How to make Topbar section always display and sticky 1 year 7 months ago #19015

  • DaoHang
  • DaoHang's Avatar
  • Offline
  • New Member
  • Posts: 12
  • Karma: 0
Hi Chetan,
I got it.
After explore for a while, I found '.astroid-header-section .astroid-header-sticky', so I set top position to be 80px instead of 0, and it worked.
Thanks,
D
The administrator has disabled public write access.

How to make Topbar section always display and sticky 1 year 7 months ago #19016

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4445
  • Thank you received: 642
  • Karma: 116
Cool, glad it worked out for you.
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.328 seconds
Cron Job Starts