0

I've read a lot of questions about affix and sidebars, but either I don't understand well or I can't find the solution to my problem:

Following the advice found here, I made the JS code to dynamically define the offset (barrehaut is the class of my header):

var y = $('.barrehaut').height();
        $('nav').affix({
            offset: {
            top: y
        }

And it's working well

Following an other answer, I wrapped my nav div in another div "on the grid" : 

<div class="col-md-3 hidden-print">
    <nav class="bs-docs-sidebar">
        <ul class="nav">
            <li class="active"><a href="#1">Environnement requis pour accéder au service EDIFLEX</a>
                <ul class="nav nav-stacked">
                    <li><a href="#1p1">Préambule</a></li>
                    <li><a href="#1p2">Connexion via internet</a></li>
                    <li><a href="#1p3">Conseils pour l'utilisation du logiciel de navigation</a></li>
                </ul>
            </li>

    </nav>
</div>

And, of course, I define my Affix Classe : 

.affix {
    top: 0;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 20px;
    position: fixed;

    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

Two questions:

1- How do I make my menu disappear when the window size is less than xx px? (as the col-md-3 would without the affix)

2- Is there a way to dynamically fix the width of the affix class according to the width of the wrapper (col-md-3 in my case) in order to not see the menu change when fixed on the top ? I know how to add or remove classes via JS but not how to change an attribute of a CSS class, is it possible?

Simple Sandman
  • 900
  • 3
  • 11
  • 34
Jsl
  • 19
  • 4

1 Answers1

0

I manage to do it !

To make the menu disappear when the windows size is less than 992 px (like Col-md-3), I used the css : 

.affix {
    top: 0;
    padding-right: 15px;
    padding-left: 0px;
    margin-right: 20px;
    position: fixed;
    display: none;

  -webkit-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

@media screen and (min-width:992px){
    .affix {
        display:block;
    }

And to keep the good width, I forced the width of the nav using JS : 

 $(function(){
      var y = $('.barrehaut').height();
        var x = $('.nav').width();
        $('.nav').css({"width":x});
        $('nav').affix({
      offset: {
        top: y
      }

But I think I could have used the same method in the CSS (@media-screen) which I discovered Later.

Jsl
  • 19
  • 4