Author Topic: Hello admin how i can make top bar  (Read 380 times)

Offline sultanali

  • Newbie
  • *
  • Posts: 6
  • Karma: +1/-1
    • View Profile
Hello admin how i can make top bar
« on: December 30, 2017, 01:51:13 AM »
Hello admin,

My Question is, how i can we make "Sticky" Header bar in the default template (the blue bar that has logo and other links), when i scroll down, it will move along.
just like the new abantecart website.
 
i try to make the header div " position fixed " then whole page messed up, position sticky doesn't work.
it seems like the header bar is not grouped in a main single div, as it consist's of 3 to 4 div and i think this is the reason i can't able to give it fixed position or make it sticky.

in the default temp, there is a div " <div class="container-fluid"> "
and the new ac website it has " <div class="rt-header-inner"> " but can't get any clue ... how to do that.

Need help
Thanks
« Last Edit: January 02, 2018, 08:54:17 AM by sultanali »

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3227
  • Karma: +233/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Hello admin how i can make top bar
« Reply #1 on: January 03, 2018, 10:44:31 PM »
See if this will help you:
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

You can use "headerstrip" class for the div that contains the header.

We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline Sam_78

  • Full Member
  • ***
  • Posts: 110
  • Karma: +15/-1
    • View Profile
Re: Hello admin how i can make top bar
« Reply #2 on: January 05, 2018, 12:51:50 PM »
If you want your navbar to stay on-top always then modify the following line:
/storefront/view/default/template/common/header.tpl line#2 <div class="headerstrip navbar navbar-inverse" role="navigation"> to <div class="headerstrip navbar navbar-inverse navbar-fixed-top" role="navigation">

 

LoliPromDress.com Prom dresses 2018