AbanteCart Community

AbanteCart Development => Customization help => Topic started by: sultanali on December 30, 2017, 01:51:13 AM

Title: Hello admin how i can make top bar
Post by: sultanali 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

Title: Re: Hello admin how i can make top bar
Post by: abantecart 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.

Title: Re: Hello admin how i can make top bar
Post by: Sam_78 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">