We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to create a sticky menu in awetive template?

Featured Lock Resolved Task
I tried several suggestions posted in this forum but nothing worked, including copying from Optima template and changing the styles of menu (template.css).
I also tried to include the stickymenu.js but couldn't find to put the DIV tag for the menu to be sticky.
Could anyone help to create the sticky menu for awetive template?

5 Answers

Toufiq - Staff

More than a month ago #Permalink
First of all thanks for using joomshaper template, Now come to the point, at first you have to create custom.css and custom.js file. You have to include custom.js file in templates>your template>index.php file. Please see the below

->addJS('jquery.inview.min.js, main.js,custom.js')

1) Add this css in your custom.css file

.sp-sticky-nav-wrapper {
background: #fff none repeat scroll 0 0;
left: 0;
padding: 5px 0 !important;
position: fixed !important;
top: 0;
transition: all 500ms ease 0s;
width: 100%;
z-index: 9999;
}


2) Add this javascript in your custom.js file

jQuery(function($){
var _rys = jQuery.noConflict();
_rys("document").ready(function(){
_rys(window).scroll(function () {
if (_rys(this).scrollTop() > 50) {
_rys('#sp-menu-wrapper').addClass("sp-sticky-nav-wrapper");
$('#sp-menu-wrapper').data('size','small');
} else {
_rys('#sp-menu-wrapper').removeClass("sp-sticky-nav-wrapper");
$('#sp-menu-wrapper').data('size','big');
}
});
});
});


Note : Put css file in your templates css directory and put js file in your templates js directory

Thanks

Igor Mihaljko

More than a month ago #Permalink
Please post URL of your website so I can take a look

Maneesh Sharma

More than a month ago #Permalink
It is http://www.fusport.com
@Igor are you from official support team?

Igor Mihaljko

More than a month ago #Permalink
I am afraid that in your case, this is not an easy task to achieve. You would need to use JS and CSS because you have a header module position enabled above the menu. That is in case if you want only a main menu to stay on top of the page when you scroll it.

If you want header and main menu to stay on top of the page, then you can add this into the custom CSS

header#sp-header-wrapper {
height: auto;
position: fixed;
width: 100%;
z-index: 100;
}

section#sp-menu-wrapper {
position: fixed;
width: 100%;
height: auto;
top: 83px;
z-index: 100;
}

section#sp-slider-wrapper {
margin-top: 163px;
}


There are no replies made for this post yet.
Be one of the first to reply to this post!

123

Templates

327379

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us