Ok ! Thanks...

Hi again,

Yeah, I got your point. it will require some JS but I am afraid it's out of our support scope. You can hire a dev to help you with that.

Regards.

Hi,

I want it the sidebar not overriding the footer, and stay on top of it. (maybe, we can say "stop the affixing, when scrolling at the entire bottom", exactly like on this page :

http://www.joomlart.com/documentation/joomla-templates/uber-template/uber-template-configuration#create-template-style.

Do you see my point ?

Regards,

Paul

Hi again,

I checked the site you mentioned: http://polymetis.fr/gmpca/actualites-du-gmpca and see the issue but I am not sure how you want it to be, you want the footer section override the sidebar?

Hi Gardner,

Sorry for the late answer , I didn't see yours before...

I'm afraid the site I was talking about is intranet, but I've got another one where I'd like to do the same thing. It is still in development and it uses t3-framework too. You can see it here :

http://polymetis.fr/gmpca/actualites-du-gmpca

I believe it is some JS customization, but any help will be welcome

Regards,

Paul

Hi,

It will require some customization, could you please share the page that have the sidebar, I will check and suggest.

Regards.

Hi Igor,

This is a really nice tutorial !

I've followed it and it works well...

But... When I'm scrolling to the bottom of my page, the navbar overlay my footer and that's bad !

Do you know how to fix this ?

Thanks,

Polo

thanks Igor Cunha, great tutorial .

Had a small error in Layout view, corrected now.

<!-- SIDEBAR LEFT -->

<div class="t3-sidebar t3-sidebar-1 col-xs-6 col-md-3 col-md-pull-6 <?php $this->_c($vars['sidebar1']) ?>">

<div data-spy="affix" data-offset-top="90">

<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar1']) ?>" style="T3Xhtml" />

</div>

</div>

<!-- //SIDEBAR LEFT -->

Oh, great tutorials

I used this css . I used only more than 768px. Less,i use menu in collapse .

@media (max-width:767px) {
display:none;
}

@media (min-width:768px) and (max-width:991px) {
.affix {
width: 220px;
}

}
@media (min-width:992px) and (max-width:1199px) {
.affix {
width: 213px;
}

}

@media (min-width:1200px){
.affix {
width: 263px;
}
}

To use a joomla menu (main menu) without creating html, just add this code in TLPS / blocks / mainbody folder / one-sidebar-left:

Original:

<!-- SIDEBAR LEFT -->
<div class="t3-sidebar t3-sidebar-left col-xs-12 col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-9 <?php $this->_c($vars['sidebar']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR LEFT -->


New:

<!-- SIDEBAR LEFT -->

<div class="t3-sidebar t3-sidebar-left col-xs-12 col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-9"><div data-spy="affix" data-offset-top="90"><?php $this->_c($vars['sidebar']) ?>
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" /></div> </div>

<!-- //SIDEBAR LEFT -->


custom.css:

.affix {
top:90px;
position:fixed;
}


In this mode, you need rename the changed files and the calls in mainbody.php to preserve your work during an upgrade.

or

.affix {
width:263px;
top:100px;
position:fixed;
}

I used this in sidebar.

<div data-spy="affix" data-offset-top="100">
<ul class="doc-nav nav nav-list">
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
</div>

Im my custom.css i put.

.affix {
top:100px;
position:fixed;
}

You can add the class "affix" to the sidebar. Here is an example:

<div class="doc-container row">

<div class="doc-sidebar col-md-3">

<ul class="affix doc-nav nav nav-list">

<li><a href="#section-1">Section 1</a></li>

<li><a href="#section-2">Section 2</a></li>

<li><a href="#section-3">Section 3</a></li>

</ul>

</div> 



<div class="doc-content col-md-9">

<section id="section-1">

<h3>Section 1</h3>

<p>Section 1 content here.</p>

...

</section>

<section id="section-2">

<h3>Section 2</h3>

<p>Section 2 content here.</p>

...

</section>

<section id="section-3">

<h3>Section 3</h3>

<p>Section 3 content here.</p>

...

</section>

</div> 

</div>

What you have to do next is to fix the position of the sidebar. Add the CSS rule to the custom.css file (templates/t3_bs3_blank/css).

.doc-nav.affix {

top: 200px;

bottom: 200px;

}

View more info about Bootstrap affix at: http://getbootstrap.com/javascript/#affix

Gardner.

Hi,

Please try to remove the JS, the JS is to make the progressive effect. That means in the tutorials, ignore the step: "Then, we add some JavaScript"

Gardner.

its not working Is there any other options , I need to add "data-spy" and "data-target or somethig else??

Hi,

Please try to remove the JS, the JS is to make the progressive effect. That means in the tutorials, ignore the step: "Then, we add some JavaScript"

Gardner.

hi ,
i have checked above documentation , Well i don't want to add progressive sidebar navigation, i just want my sidebar position fixed on mouse scroll can you please guide me.

Thanks

Thank you Gardner luna