[Solved] Fixed header and Notification bar

sarthakinfotech wrote:hi
i found the solution for this requirement.

you may use jquery plungins for this

like you may find many solutions from here
http://www.jqueryrain.com/demo/jquery-fixed-header/

i have chosen this one
https://github.com/bigspotteddog/ScrollToFixed

steps to follow is as below;

1.download files from https://github.com/bigspotteddog/ScrollToFixed link
2.place jquery-scrolltofixed-min.js at
catalog\view\javascript\jquery
3.open catalog\view\theme\default\template\common\header.tpl

goto

Code: Select all

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

and add below code

Code: Select all

<script src="catalog/view/javascript/jquery/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#mydiv').scrollToFixed();
});
</script>

4.now goto

Code: Select all

<nav id="top"> 

and above this add below code

Code: Select all

<div id="mydiv" style="z-index:1;background-color:white;">

now goto
end of file and add below code

Code: Select all

</div>

now you may test the code .

it will work as you want.

good day.

ashacms wrote: ↑

Tue Apr 03, 2018 8:45 pm

hi ,
i am working with opencart 3.0.2.0 . I have checked the idea of @sarthakinfotech , but it doesn't work for me.
Do any body know other idea to fix header in opencart 3 ?

thank you

sarthakinfotech wrote: ↑

Fri Aug 05, 2016 12:09 pm

hi
i found the solution for this requirement.

you may use jquery plungins for this

like you may find many solutions from here
http://www.jqueryrain.com/demo/jquery-fixed-header/

i have chosen this one
https://github.com/bigspotteddog/ScrollToFixed

steps to follow is as below;

1.download files from https://github.com/bigspotteddog/ScrollToFixed link
2.place jquery-scrolltofixed-min.js at
catalog\view\javascript\jquery
3.open catalog\view\theme\default\template\common\header.tpl

goto

Code: Select all

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

and add below code

Code: Select all

<script src="catalog/view/javascript/jquery/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#mydiv').scrollToFixed();
});
</script>

4.now goto

Code: Select all

<nav id="top"> 

and above this add below code

Code: Select all

<div id="mydiv" style="z-index:1;background-color:white;">

now goto
end of file and add below code

Code: Select all

</div>

now you may test the code .

it will work as you want.

good day.