Joomla Templates Club 406,261 posts

[otomol Friend otomolJoin date: May 2011Posts: 85Downloads:96Uploads:22 Thanks: 17]

#191687

Hello

With the mainnav menu, when scrolling down the whole body section goes all the way to the top with the min-mainnav on top of what ever is there, how can i get the same result like the new template JA-Magz, when scrolling down the mainmenu stays static but the body doesn’t hides behind the menu but instead gradually goes up.

Thanks

Img with the normal Menu before scrolling

Img with the menu min-mainnav right after scrolling

---

Attachments:

1. 
2. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510184

Hi otomol,

You can make the main menu of JA Muzic template static and the body gradually go up when scrolling by removing the scripts of defining the “.min-mainnav” class on main menu in templatesja_muzicjsscript.js at line 191-213th:

(function(){
// Add class for mainmenu when scroller
var min = null,
sid = null,
mainnav = $('#t3-mainnav');

if(mainnav.length){
$(window).scroll(function() {

if(min != $(window).scrollTop() > mainnav.outerHeight(true) *0.4){
min = !min;

min ? mainnav.addClass('affix') : mainnav.removeClass('min-mainnav');

//force reflow
mainnav[0].offsetWidth;

min ? mainnav.addClass('min-mainnav') : mainnav.removeClass('affix');
}
})
}

})();

Remember to backup the file before editing.

[otomol Friend otomolJoin date: May 2011Posts: 85Downloads:96Uploads:22 Thanks: 17]

#510442

Leo Thanks for the tip it work great if i want to remove the class .min-mainnav

But what i really want is to have the same result like in the new template JA-Magz

So what i did is to replace the code you told me from templatesja_muzicjsscript.js with the code from the same class in template ja_magz script.js wish is this one

// add class for mainmenu when scroller --function de JA Magz--
(function(){
var min = null,
sid = null,
mainnav = $('#t3-mainnav'),
navbar = mainnav.find('.navbar:first'),
breakpoint = navbar.length ? navbar.offset().top : 0;
height = null;

if(mainnav.length){
$(window).scroll(function() {

if(min != $(window).scrollTop() > breakpoint){
min = !min;

min ? mainnav.addClass('affix') : mainnav.removeClass('min-mainnav');

//force reflow
mainnav[0].offsetWidth;
mainnav.prevAll('.hplace').remove();

if(min){
$('<div class="hplace clearfix"></div>').insertBefore(mainnav).css('height', mainnav.outerHeight(true));
mainnav.addClass('min-mainnav');
} else {
mainnav.removeClass('affix');
}
}
})
}

})();

It work good but is giving me a problem with the DIV

if(min){
$('<div class="hplace clearfix"></div>').insertBefore(mainnav).css('height', mainnav.outerHeight(true));

It leaves a space on the top of the page and is giving a height = 138px; like in the image

But in firefox i remove the position for the min-mainnav to CERO and it brings the min-mainnav back to TOP=0px; but with out firefox how can i change that in the template.

Thanks

---

Attachments:

1. 
2. 

[otomol Friend otomolJoin date: May 2011Posts: 85Downloads:96Uploads:22 Thanks: 17]

#510443

Ey Leo i try to solve my problem but i dont know if this is the best way to assign height=0;
so i did it straight in the script.js

if(min){
$('<div class="hplace clearfix"></div>').insertBefore(mainnav).css('height==0', mainnav.outerHeight(true));

So my question: Is ok to do that inhte script.js or how can i do the same in the template.css

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510454

Hi otomol,

The top space comes from the margin-top of main navigation when you disable the .min-mainnav. You just need to create a custom.css file at templates/ja_muzic/css/ path and put below overridden css styles into:

/*Adjust t3-mainav margin-top when removing .min-mainnav*/
.t3-mainnav {
margin-top: 0;
}

[otomol Friend otomolJoin date: May 2011Posts: 85Downloads:96Uploads:22 Thanks: 17]

#510735

Thanks for continuing helping me, Leo i do not want to disable .min-mainnav

i want .min-mainnav to work like here:

http://joomla-templates.joomlart.com/ja_magz/index.php/en/

is it possible?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510741

Hi otomol,

I need to confirm that the main navigation (min-mainnav) style of JA Muzic and JA Magz is the same when scrolling. The reason that the main navigation is set stay fixed at the top (top: 0px; ) so that the body seems to hidden behind the main navigation when scrolling down, but indeed it is going yp.

In this case, the idea is removing the margin-top property to make the main navigation go down a little so that you can see the body going up when scrolling. You just need to open templatesja_muziclessnavigation.less file, find lines (323-327th):

.t3-mainnav.min-mainnav {
margin-top: 0;
width: 100%;
z-index: @zindexFixedNavbar;
}


Then remove the red texts above and Compile Less to Css. Make sure that you did backup the modified in .css files.

[Author]

Posts