[SOLVED] Sticky menu on top

kestas wrote: ↑

Sat Jul 18, 2020 5:20 pm

You can try this:
Inn file: catalog/view/theme/YOUR-THEME/template/common/header.twig

find:

Code: Select all

<header>
  <div class="container">

Add additional class like this:

Code: Select all

<div class="container sticked-menu">

An in your stylesheet.css add this style

Code: Select all

.sticked-menu {
z-index: 1000; position: sticky; top: 0;
}

kestas wrote: ↑

Fri Oct 02, 2020 12:05 pm

Does not matter where. You can add on the end ofthe code.

by mona wrote: ↑

Sat Oct 03, 2020 5:47 pm

yes he is sure.
Have you refreshed your caches? both in modifications top right and in dashboard top right cog
Cleared your browser cache?
Checked your server is not caching?
Checked you have done as instructed?

According to the weblink provided the header.twig has not been edited.
Nor can I see the css has been added.

GioXir wrote: ↑

Sat Jul 18, 2020 4:43 am

Hello,
I 'm using 3.0.3.2 version and I would like to ask if there is any way to make my menu bar fixed when scrolling. My shop is www.argiabooks.gr.
Thank you in advance

xxvirusxx wrote: ↑

Thu Dec 30, 2021 6:16 pm

Is not free

pprmkr wrote: ↑

Sat Oct 03, 2020 6:13 pm

Try attached modification.
- Tested on OC2302 and OC 3032
- adds style and script to all theme folders present, all header.* files
- Install using Extension - Installer
- Extension - Modifications : Refresh

Style:

Code: Select all

<style>
/* Sticky Nav */
#menu.sticky {
	position: fixed;
	left: 35px;
	right: 35px;
	top: 0;
	z-index: 999999;
}

@media screen and (max-width: 768px) {
#menu.sticky {
		left: 15px;
		right: 15px;
	}
}
</style>

Script:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function(){
 	var menuPos = $('#menu').offset().top;
 	var windowScrollTop = $(window).scrollTop();
 	
 	if(windowScrollTop > menuPos){
		$('#menu').addClass('sticky');
	} else {
		$('#menu').removeClass('sticky');
	}
 		
    $(window).scroll(function(){
        var windowScrollTop = $(this).scrollTop();
 			if(windowScrollTop > menuPos){
				$('#menu').addClass('sticky');
			} else {
				$('#menu').removeClass('sticky');
			}
    });
});
//--></script>

pprmkr wrote: ↑

Sat Oct 03, 2020 6:13 pm

Try attached modification.
- Tested on OC2302 and OC 3032
- adds style and script to all theme folders present, all header.* files
- Install using Extension - Installer
- Extension - Modifications : Refresh

Style:

Code: Select all

<style>
/* Sticky Nav */
#menu.sticky {
	position: fixed;
	left: 35px;
	right: 35px;
	top: 0;
	z-index: 999999;
}

@media screen and (max-width: 768px) {
#menu.sticky {
		left: 15px;
		right: 15px;
	}
}
</style>

Script:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function(){
 	var menuPos = $('#menu').offset().top;
 	var windowScrollTop = $(window).scrollTop();
 	
 	if(windowScrollTop > menuPos){
		$('#menu').addClass('sticky');
	} else {
		$('#menu').removeClass('sticky');
	}
 		
    $(window).scroll(function(){
        var windowScrollTop = $(this).scrollTop();
 			if(windowScrollTop > menuPos){
				$('#menu').addClass('sticky');
			} else {
				$('#menu').removeClass('sticky');
			}
    });
});
//--></script>