Public Forums 71,145 posts

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#189377

hello
how to add affix function bootstrap on mainnav ?
i use t3 v1.4
regards

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

#500871

Hi micker,

First, you need to understand about Bootstrap Affix.

Here the document link:
http://getbootstrap.com/2.3.2/javascript.html#affix

You can use the Firebug or Chrome Inspector to look for Bootstrap left navigation on the same link above.

Though this is a Bootstrap specific question.

Regards

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#500890

but especialy for t3, maybe a specific way ?
i need to load bootstrap-affix.js ? or it’s in t3 ?
regards

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#500905

i am here but it doesn’t realy works …
in mainnav.php

<div data-offset-top="0" data-spy="affix">
<div class="nav-collapse collapse<?php echo $this->getParam('navigation_collapse_showsub', 1) ? ' always-show' : '' ?>" style="z-index:100000000;">
<?php if ($this->getParam('navigation_type') == 'megamenu') : ?>
<?php $this->megamenu($this->getParam('mm_type', 'mainmenu')) ?>
<?php else : ?>
<jdoc:include type="modules" name="<?php $this->_p('mainnav') ?>" style="raw" />
<?php endif ?>
</div>
</div>
</div>
</div>
</nav>
the menu is fixed but not on top
http://legribouillard.com/newgribou/
what i lost ?

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

#501038

Hi micker,

Please move the attribute data-spy=”affix” to the <nav> tag.
Like <nav id=”t3-mainnav” class=”wrap t3-mainnav navbar-collapse-fixed-top” data-spy=”affix”>

The affix script will check and toggle the ‘affix’ class which .affix is position fixed by default.

Hope it helps,

Regards

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#501074

same result …
does i need to load any script ?

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

#501236

Hi micker,

You do not have to load any script.
Here the steps that you can implement affix menu on T3 Blank.

1. Install a fresh T3 Blank.
2. Turn on Developement Mode
3. Open mainnav.php block and add the code in red
<nav id=”t3-mainnav” class=”wrap t3-mainnav navbar-collapse-fixed-top” data-spy=”affix” data-offset-top=”110″>

4. Open templatest3_blanklessnavigation.less and add

&.affix {
position: fixed;
top: 0;
z-index: 10000;
width: 100% !important;
}

just after .t3-mainnav

like this

.t3-mainnav {

&.affix {
position: fixed;
top: 0;
z-index: 10000;
width: 100% !important;
}

#gradient > .vertical @navbarBackgroundHighlight, @navbarBackground);
border-top: 1px solid @navbarBackground;
border-bottom: 1px solid darken @navbarBackground, 10%);
…… more code here

5. Refresh in front end to see it work or not.
6. Rebuild CSS if it work and turn off Development Mode

Hope it helps,

Regards

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#502069

great thanks !!!!

[austenn01 Friend austenn01Join date: August 2010Posts: 175Downloads:115Uploads:14 Thanked: 33 times in 1 posts]

#530912

<em>@Wall Crasher 383566 wrote:</em><blockquote>Hi micker,

You do not have to load any script.
Here the steps that you can implement affix menu on T3 Blank.

1. Install a fresh T3 Blank.
2. Turn on Developement Mode
3. Open mainnav.php block and add the code in red
<nav id=”t3-mainnav” class=”wrap t3-mainnav navbar-collapse-fixed-top” data-spy=”affix” data-offset-top=”110″>

4. Open templatest3_blanklessnavigation.less and add

&.affix {
position: fixed;
top: 0;
z-index: 10000;
width: 100% !important;
}

just after .t3-mainnav

like this

.t3-mainnav {

&.affix {
position: fixed;
top: 0;
z-index: 10000;
width: 100% !important;
}

#gradient > .vertical @navbarBackgroundHighlight, @navbarBackground);
border-top: 1px solid @navbarBackground;
border-bottom: 1px solid darken @navbarBackground, 10%);
…… more code here

5. Refresh in front end to see it work or not.
6. Rebuild CSS if it work and turn off Development Mode

Hope it helps,

Regards</blockquote>

Hello,

This assumes we are using Bootstrap 2 version of T3.

How do we do it with BS3? IE: there is no navigation.less file

[austenn01 Friend austenn01Join date: August 2010Posts: 175Downloads:115Uploads:14 Thanked: 33 times in 1 posts]

#530913

Hello,

Ok…I worked out how to make this happen.

1) install default T3V3 Blank quickstart package – make sure the BS3 version is selected as the default template

2) Enable development mode

3) Open mainnav.php (in the tpls/blocks folder)

4) Change (Around line 23):

<nav id=”t3-mainnav” class=”wrap navbar navbar-default t3-mainnav”>

to

<nav id=”t3-mainnav” class=”wrap navbar navbar-default t3-mainnav” data-spy=”affix” data-offset-top=”10″>

5) Go to the /less folder and create custom.less (and also create custom.css in the /css folder)

6) Since we are in development mode, edit custom.less and add this code:

.affix {
top: 0px;
magrin-left: auto;
margin-right: auto;
width: 100%
}

7) Refresh in front end to see it work or not.

8) Rebuild CSS if it work and turn off Development Mode

[va6dah Friend va6dahJoin date: July 2014Posts: 1Downloads:0Uploads:1]

#543074

<em>@austenn01 421775 wrote:</em><blockquote>Hello,

Ok…I worked out how to make this happen.

1) install default T3V3 Blank quickstart package – make sure the BS3 version is selected as the default template

2) Enable development mode

3) Open mainnav.php (in the tpls/blocks folder)

4) Change (Around line 23):

<nav id=”t3-mainnav” class=”wrap navbar navbar-default t3-mainnav”>

to

<nav id=”t3-mainnav” class=”wrap navbar navbar-default t3-mainnav” data-spy=”affix” data-offset-top=”10″>

5) Go to the /less folder and create custom.less (and also create custom.css in the /css folder)

6) Since we are in development mode, edit custom.less and add this code:

.affix {
top: 0px;
magrin-left: auto;
margin-right: auto;
width: 100%
}

7) Refresh in front end to see it work or not.

8) Rebuild CSS if it work and turn off Development Mode</blockquote>

First off I would like to say thanks 😀

Second, it seems it is not on “top”. After scrolling down it gets submerged behind content and is not clickable.

https://drive.google.com/folderview?id=0B–MsKZUuJcbWFRHTURiOFhaX0E&usp=sharing

Full webpage above to demo.

---

Attachments:

1. 

[Author]

Posts