Joomla Templates Club 406,261 posts

[vric Friend vricJoin date: April 2008Posts: 22Downloads:7Uploads:0 Thanks: 3 Thanked: 1 times in 1 posts]

#186222

Hi

I’m trying to customize the Argo navigation so it could give me space for a header (aka bigger logo)

I try to modify the menu so it isn’t on absolute top, but a bit below. This is easy but the part I can’t get it to work is to “stick” at the top as soon as I passed it.

You can see an exemple of this on polygon.com

So far I have tried this js script with no avail. Guess there’s too much css conflict.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

if anyone has an idea, lmk!

Thanks

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#487964

Dear Vric,

Please open file templates/ja_argo/js/script.js and find sidebar = $(‘.sidebar-affix’) . It is a example, you could add menu block as sidebar block in this file.

Regards

[vric Friend vricJoin date: April 2008Posts: 22Downloads:7Uploads:0 Thanks: 3 Thanked: 1 times in 1 posts]

#489351

Hi

Thanks for the reply. I tried my best to understand and with trial and error, I mostly got error.

Would you be able to give a little more details please?

Thanks

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#489413

Hi vric,

Just open file /templates/ja_argo/js/script.js and add this line code at the bottom:

jQuery(‘#t3-mainnav’).affix({offset: {top: 50}})

Make sure you place this line inside a $(document).ready(function(){ .. }); function call.

Please change the 50 here to the distance from top to your navigation bar.
You also need to remove position fixed .navbar-fixed-top from the div#t3-mainnav (this can be done via templatesja_argotplsblocksheader.php)

Hope it helps.

Regards

2 users say Thank You to Wall Crasher for this useful post

1. vric
2. phong nam

[vric Friend vricJoin date: April 2008Posts: 22Downloads:7Uploads:0 Thanks: 3 Thanked: 1 times in 1 posts]

#489597

Thanks for the reply. The function seem to work great!

The only thing, and I hate to ask, is the CSS applied to the nave change from t3-mainnav “navbar-collapse-fixed-top affix-top” to “wrap t3-mainnav navbar-collapse-fixed-top affix“

I can’t find anything about these two. So when I scroll down at the triggered height, the navbar switch to left instead of center, doesn’t take the whole page and the t3-mainbody switch from 1196px to about 800 (guessing here, Can’t see the css of that)

Not sure if I’m clear.

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#489605

Hi vric,

You should add css for those class change.

.navbar-collapse-fixed-top.affix-top {
position: static;
z-index: 2000;
}

.navbar-collapse-fixed-top.affix {
position: fixed;
top: 0; (you can change it if you want);
left: 0;
right: 0;
}

Hope it helps.

Regards

[vric Friend vricJoin date: April 2008Posts: 22Downloads:7Uploads:0 Thanks: 3 Thanked: 1 times in 1 posts]

#489711

it actually work thanks!

Only thing now is: the sidebar that was fixed isnt anymore and once I’m at the bottom of the page, there’s no autolog

This is with any other theme beside “default”. Default still “squeze” itselft for no reason. Guess it’s a bug from the template

[vric Friend vricJoin date: April 2008Posts: 22Downloads:7Uploads:0 Thanks: 3 Thanked: 1 times in 1 posts]

#489712

Edit:

Nevermind.

the jQuery(‘#t3-mainnav’).affix({offset: {top: 100}}) line MUST be at the very bottom of the script.js file to work.

Everything works as it should. Thanks a lot guys!

[vric Friend vricJoin date: April 2008Posts: 22Downloads:7Uploads:0 Thanks: 3 Thanked: 1 times in 1 posts]

#491476

Ok I have to reopen this.

The menu was working fine until I put it only on my dev server (was working in wamp) Now I have a “trigger” problem when the menu isn’t fixed. (when page isn’t scrolled

I first had this problem on my dev computer, and I found out that the class .open in template had an * in front of the z-index. Removing the * solved the problem. But on my live dev site, doing so doesn’t works. I tried my best to see if there was a conflict with z-indexes, but can’t find any.

The problem is more important on Google Chrome and IE where the menu is unusable. Firefox works ok with it (you can see the cursor change a lot, but megadim class is trigered and menu show)

Any help would be appreciated. Thanks

[vric Friend vricJoin date: April 2008Posts: 22Downloads:7Uploads:0 Thanks: 3 Thanked: 1 times in 1 posts]

#491483

Found it (after many hours :p)

.navbar-collapse-fixed-top.affix-top {
position: static;
z-index: 2000;
}

Should be position: relative; not static
Solved problem under Firefox IE and Chrome

Mods, can you edit my msg and remove url. Thanks

1 user says Thank You to vric for this useful post

1. Ninja Lead

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#491496

Great, good jobs

<blockquote>Mods, can you edit my msg and remove url.</blockquote>

I have removed your request

[Author]

Posts