Änderungen der Breite des festen Elements

Question

Das Navigationselement in der Seitenleiste ändert die Breite, sobald die feste Klasse beim Scrollen zu diesem Element hinzugefügt wird. Je nach Bildschirmbreite ändert es sich erheblich.

http://festiva.com/fac.php

<div class="col-sm-4 nav_cnt"> 
    <ul class="nav"> 
     <li><a href="destinations2.php">Overview </a></li> 
     <li><a class="current"href="fac.php">Festiva Adventure Club <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></li> 
     <li><a href="#">Festiva Weeks</a></li> 
     <li><a href="#">Festiva Exchange Partners</a></li> 
     <li><a href="#">Voyages by RTX</a></li> 
     <li><a href="#">Festiva Sailing Vacations</a></li> 
     </ul> 
    </div> 

@media handheld, only screen and (min-width: 767px) { 
    .nav_cnt{ 
     position: relative; 
    } 
    .fixed{ 
     margin-bottom: 50px; 
     position:fixed; 
     top:50px; 
     width: inherit; 
     width: 25%; 
    } 
} 

$(window).bind('scroll', function() { 
     if($(window).scrollTop() >= $('.nav_cnt').offset().top - 50) { 
      $('.nav_cnt').find('.nav').addClass('fixed'); 
     }else{ 
      $('.nav_cnt').find('.nav').removeClass('fixed'); 
     } 
    }); 

Answer 1

würde ich nur eine gute Breite für diese Sidebar nav finden und es eine explizite Schränkungsweite bis Handy geben. Auf diese Weise wissen Sie, dass es konsistent bleibt und die Breite nicht ändert. 280px schien mir gut, als ich testete und ich setze die .nav_cnt auf eine col-xs-12 col-sm-4 col-md-3 col-lg-3 statt, so dass der Inhalt näher an diese Sidebar Nav geschoben wird. Probieren Sie das aus und sehen Sie, ob Ihnen das Aussehen gefällt.

Answer 2

Suchen Sie dies in Ihrem main.css und machen Sie diese Änderungen und versuchen Sie es.

@media handheld, only screen and (min-width: 767px) { 
    .nav_cnt{ 
     position: relative; 

    } 
    .fixed{ 
     margin-bottom: 50px; 
     position:fixed; 
     top:50px; 
     width:26.65%; 
    } 
}