Post by GioXir » 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

Newbie

Posts

Joined
Tue Dec 10, 2019 4:24 pm

Post by kestas » 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;
}

Custom OpenCart modules and solutions. You can write PM with additional questions... Extensions you can find here


Active Member

Posts

Joined
Tue Oct 12, 2010 2:23 am

Post by GioXir » Fri Oct 02, 2020 5:58 am

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;
}
thank you for your reply.
Where exactly should I add the style in my stylesheet.css?
thanks once again

Newbie

Posts

Joined
Tue Dec 10, 2019 4:24 pm

Post by kestas » Fri Oct 02, 2020 12:05 pm

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

Custom OpenCart modules and solutions. You can write PM with additional questions... Extensions you can find here


Active Member

Posts

Joined
Tue Oct 12, 2010 2:23 am

Post by GioXir » Sat Oct 03, 2020 5:38 pm

kestas wrote:
Fri Oct 02, 2020 12:05 pm
Does not matter where. You can add on the end ofthe code.
Unfortunately It doesn't work. Are you sure that these changes must be done in header.twig as long as I want the menu to be fixed?

Newbie

Posts

Joined
Tue Dec 10, 2019 4:24 pm

Post by by mona » 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.

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


Spinning Social : Links : Menus : Payments : Socials : Ads : Screen Backgrounds : Galleries : Headers : Banners : Promos


Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by pprmkr » 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>

User avatar
Active Member

Posts

Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands

Post by GioXir » Tue Oct 06, 2020 5:53 pm

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.
I refreshed the cashes both in admin and browser. My server is not. You can't see any changes because when I didn't see any result I set it back to the default.
Thank you for your help though

Newbie

Posts

Joined
Tue Dec 10, 2019 4:24 pm

Post by sarthakinfotech » Wed Oct 07, 2020 12:39 am

hi,
you may use extension developed by me (free extension) available at https://www.opencart.com/index.php?rout ... n_id=27771

Good Day,
Jagruti
opencart tips and tricks ,
opencart blogs , opencart extensions/themes , custom development.


User avatar
Active Member

Posts

Joined
Tue Aug 05, 2014 1:12 am
Location - india
Who is online

Users browsing this forum: No registered users and 7 guests